废话不多说了,直接给大家贴代码了,具体代码如下所述:
$(函数(){
$(' #发送').click(函数(){
. ajax({美元
类型:“获得”,
url:“test.json”,
数据:{用户名:$(" #用户名").val(),密码:$(" #密码").val()},//参数为对象
数据类型:“json”,
成功:功能(数据){//代码…
}
});
});
});
$(函数(){
$(' #发送').click(函数(){
var用户名=$(" #用户名”).val ();
var密码=$(" #密码”).val ();
. ajax({美元
类型:“获得”,
url:“test.json”,
数据:“用户名”+用户名+”和密码“+密码,//参数为字符串拼接,并用,连接
数据类型:“json”,
成功:功能(数据){//代码…
}
});
});
});
以上是一段常规的ajax请求代码,其中分别列举了数据参数的两种传递格式。
为了简便ajax请求时的数据参数获取,jquery定义了几个快速的方法。
<强> 1. serialize()
用法:var数据=https://www.yisu.com/zixun/$(“形式”).serialize ();
返回值:将表单内容序列化成一个字符串。
这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将数据参数设置为美元(“形式”).serialize()即可。
,,,,,其核心方法是.param美元(),用来对一个数组或对象按照键/值进行序列化,
var obj={去年:第一:“一”,“两个”};
var str=$ .param (obj);
console.log (str);,,,//第一次=one&最后两个
=另外,使用序列化有个好处是自带中文编译处理,所以,推荐使用序列化。
<强> 2. serializearray()
用法:var jsonData=https://www.yisu.com/zixun/$(“形式”).serializeArray ();
返回值:将页面表单序列化成一个JSON结构(键值对)的对象。
比如,[{“名称”:“并”、“年龄”:“20”},{…}]获取数据为jsonData(指数). name
综上:在使用ajax提交表单数据时,数据参数设置为美元(形式).serialize()或美元(形式).serializeArray()都可以。另外有些细节建议参考w3c。
最后补充一个完整实例。
html:
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;/head>
& lt; body>
id=把菔尽北? lt;形式;
& lt;输入类型="文本" value=" https://www.yisu.com/zixun/demo1 " name=" demo1祝辞
& lt;输入类型="文本" value=" https://www.yisu.com/zixun/demo2 " name="以及接下来的在
& lt;输入类型="文本" value=" https://www.yisu.com/zixun/demo3 " name=" demo3祝辞
& lt;输入类型="提交" value=" https://www.yisu.com/zixun/提交" id=疤峤弧北?
& lt;/form>
& lt;/body>
& lt;/html>
JavaScript:
& lt; script>//别忘了引入jquery ! ! !
$(函数(){
$(" #提交”).click(函数(){//var数据=https://www.yisu.com/zixun/$(“形式”).serializeArray ();
var data=https://www.yisu.com/zixun/$(“形式”).serialize ();
. ajax({美元
类型:“获得”,
url: php“1.”,
数据:数据,
数据类型:“json”,
成功:功能(数据){
console.log(数据);
}，
错误:函数(xhr、错误){
console.log(错误);
}
}）
}）
}）
& lt;/script>
php 提醒:需要配置php环境并开启服务器
& lt; & # 63; php
回声json_encode ($ _GET);
& # 63;在
以上所述是小编给大家介绍的jQuery表单序列化实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
