form提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="js/jquery-3.3.1.min.js"></script>-->
</head>
<body>
<form id="addForm" action="/newp" method="post">
<div>
<label>用户名</label>
<input type="text" name="name">
</div>
<div>
<label>手机号</label>
<input type="text" name="mobile">
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
</body>
</html>
ajax用序列化获取数据来提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id="addForm" >
<div>
<label>用户名</label>
<input type="text" name="name">
</div>
<div>
<label>手机号</label>
<input type="text" name="mobile">
</div>
</form>
<div>
<button onclick="add()">提交</button>
</div>
<script>
function add() {
var data = $("#addForm").serialize();
//参数较多用这种序列化的方式比较方便 . 需要用name属性，不能用id属性
$.ajax({
type: "post",
url: "newp",
data: data,
success: function (val) {
console.log(val);
}
})
}
</script>
</body>
</html>
ajax用单点获取数据来提交（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id="addForm" action="" method="post">
<div>
<label>用户名</label>
<input type="text" id="name">
</div>
<div>
<label>手机号</label>
<input type="text" id="mobile">
</div>
</form>
<div>
<button onclick="add()">提交</button>
</div>
<script>
function add() {
var data={
"name":$("#name").val(),
"mobile":$("#mobile").val()
// 如果用name属性，就用："mobile":$("input[name='mobile']").val();
}
$.ajax({
type: "post",
url: "newp",
data: data,
success: function (val) {
console.log(val);
}
})
}
</script>
</body>
</html>
ajax用单点获取数据来提交（2） 可以帮助判空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id="addForm" action="" method="post">
<div>
<label>用户名</label>
<input type="text" id="name">
</div>
<div>
<label>手机号</label>
<input type="text" id="mobile">
</div>
</form>
<div>
<button onclick="add()">提交</button>
</div>
<script>
function add() {
var phone = $("#name").val();
var address = $("#mobile").val() ;
if (phone == null || phone.length == 0) {
alert("客户联系电话不能为空")
return;
}
$.ajax({
type: "post",
url: "newp",
// async: true, //默认缺省为true表示异步
data: {
name: name,
mobile: mobile,
},
success: function (val) {
console.log(val);
}
})
}
</script>
</body>
</html>
