首页 > php,JavaScript,IOS开发 > ajax获取提交表单返回值(2)- post表单数据

ajax获取提交表单返回值(2)- post表单数据

根据ajax获取提交表单返回值(1)中的示例,发现post的data要么是var 要么是jason格式,那么问题来了,html中的表单如何发送呢?

现在有两种方案:

1.jQuery ajax - serialize() 方法
定义和用法

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。

您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

<script src="jquery-1.11.1.min.js"> 
</script>

</head>

<body>


<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>
<script> 
$('form').submit(function() {
  alert($(this).serialize());
  return false;
});
</script>
  1. 利用 jquery.form.js 异步提交form插件

插件下载地址及说明: http://malsup. com/jquery/form/
中文说明: http://www. cnblogs. com/luluping/archive/2009/04/15/1436177.html

在这里我用第一种方法:

代码如下:

<head>
<script src="jquery-1.11.1.min.js"> 
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
    var queryString = $('#ddd').serialize();
  $.post("../test/login.php",queryString,
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    return false;
  },"html");
});
});

</script>

</head>

<body>



<form id=ddd method=post>
<input type="text" name="usrname" />
<input type="text" name="email" />
<input type="text" name="mbphone" />
<input type="text" name="passwd" />
<input type="text" name="type" value="0" />
<input type="text" name="extid" />




<button>subimt</button>

</form>
</body>

上一篇: ajax获取提交表单返回值(1)- POST and GET

下一篇: ajax获取提交表单返回值(3)- 405 Not Allowed