0.表单:
HTML
<form id='test' >
<input type='submit' value='提交'>
</form>
jQuery代码:
var myForm = $('#test).submit(function() {
$.ajax({
url: '提交的URL',
type: 'post',//提交的方式
dataType:'json'
data: myForm.serializeArray(),
success: function(msg) {
//这是成功返回的数据,写自己的逻辑
}
});
1.查处隐藏的或者是不隐藏的
![](https://img.haomeiwen.com/i4054553/8e104384ed983ad2.jpg)
2.jQuery获取表单中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function() {
$('#submit').click(function() {
var d = {};
var t = $('form').serializeArray();
$.each(t, function() {
d[this.name] = this.value;
});
alert(JSON.stringify(d));
});
});
</script>
</head>
<body>
<form>
<input id="a1" type="input" value="" name="a1"><br>
<input id="a2" type="input" value="" name="a2"><br>
<input id="a3" type="input" value="" name="a3"><br>
<input id="a4" type="input" value="" name="a4"><br>
<select id="ax" name="ax">
<option value="0">选项1</option>
<option value="1">选项2</option>
</select><br>
<input id="submit" type="button" value="提交" name="submit">
</form>
</body>
</html>
3.js获取表单中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
// 如:{Name:'摘取天上星',position:'IT技术'}
// ps:注意将同名的放在一个数组里
function getFormJson(form) {
var o = {};
var a = $(form).serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
//调试调用
$(function(){
$("#button").click(function(){
console.log(getFormJson("#formID"));
});
});
</script>
</head>
<body>
<form id="formID">
姓名 <input value="摘取天上星" name="Name" />
职位 <input value="IT技术" name="position" />
<input id="button" value="提交" type="button" />
</form>
</body>
</html>
4.js 判断从后台传过来的Boolean类型
![](https://img.haomeiwen.com/i4054553/9f213a1becb8d7ef.jpg)
5.json的ajax异步请求传值
![](https://img.haomeiwen.com/i4054553/af4502e9c4741e62.jpg)
6.jquery判断对象是不是为空,用jQuery的方法
![](https://img.haomeiwen.com/i4054553/82ec1b900e814718.jpg)
7.ajax提交数据
![](https://img.haomeiwen.com/i4054553/d9e7c0a7fd8da9af.jpg)
![](https://img.haomeiwen.com/i4054553/c92bafea7fe403f1.png)
![](https://img.haomeiwen.com/i4054553/e78d198f9402ac71.png)
8.JSON字符串和JSON对象之间的转换
![](https://img.haomeiwen.com/i4054553/2603556e3dcdd225.jpg)
网友评论