ajax 与后台交互学习笔记小结
一、form 提交格式，多参数：
二、post 提交格式，多参数：
1.在页面上最好不要用submit触发ajax，因为这样会很容易出问题，今天学习的时候就遇到了触发不了ajax的问题。所以最好用button来触发。
2.若想利用ajax提交form表单，则可以在ajax的data属性中提供form表单的序列化，如：
data:$('#formId').serialize() 3.若要用submit提交信息，则可以用：
$('#formId').submit(function() {
//ajax代码
}); 注意：此时的方式要在form表单中设置，在ajax设置是无效的！！！
基于上述三点提供一个例子
<body>
<form action="#" id="userInfo" method="post">
用户名:<input type="text" name="userName" id="name"/><br/>
密码：<input type="password" name="password" id="password"/><br/>
<input type="submit" value="提交"/>
form>
body>
html>
<script type="text/javascript">
$(function() {
$('#userInfo').submit(function() {
$.ajax({
type:'POST',
url:'<%=request.getContextPath()%>/user/createUser2',
data:$('#userInfo').serialize(),
success:function(data){
alert(data);
},
error:function()
{
alert("服务器错误");
alert("hahhahah");
window.location.href = "<%=request.getContextPath()%>/faile.jsp";
}
});
});
});
script>其他参考样例一
function sendAjax2()
{
var username = $("#username").val();
var age = $("#age").val();
var div = $("#showDiv");
$.ajax(
{
url:"checkUsername2.action",
type:"post",
data:'{"username":"username","age":"4"}',
contentType:"application/json;charset=utf-8",
dataType:"json",
success:function(data)
{
var jsons = data;
div.html("");
for(var i = 0; i < jsons.length; i++)
{
div.append(""+jsons[i].username+"");
}
}
});
}参考样例二:
// ajax请求后台,以对象形式
function searchViaAjax() {
var search = {};
search["username"] = $("#username").val();
search["email"] = $("#email").val();
$.ajax({
type : "POST",
contentType : "application/json",
url : "${home}search/api/getSearchResult",
data : JSON.stringify(search),
dataType : 'json',
timeout : 100000,
success : function(data) {
console.log("SUCCESS: ", data);
display(data);
},
error : function(e) {
console.log("ERROR: ", e);
display(e);
},
done : function(e) {
console.log("DONE");
enableSearchButton(true);
}
});
}
post 提交格式，多参数：
$("#edit_save").click(function () {
$.ajax({
type: "POST",
url: "/sell/save",
contentType:'application/x-www-form-urlencoded',
data:{
name:$("#edit_name").val(),
sn: $("#edit_sn").val(),
weight:$("#edit_weight").val(),
marketPrice:$("#edit_marketPrice").val(),
shopPrice:$("#edit_shopPrice").val(),
unit:$("#edit_unit").val(),
number:$("#edit_number").val(),
},
success: function () {
}
})
}）
class="modal-footer">
//controller接收参数
@RequestMapping(value = "/save",method = RequestMethod.POST)
public String saveGoodsPage(@RequestParam(value = "name",required=false) String name,@RequestParam(value = "sn",required=false) String sn,
@RequestParam(value = "number",required=false) String number,@RequestParam(value = "weight",required=false) String weight,
@RequestParam(value = "marketPrice",required=false) String marketPrice,@RequestParam(value = "shopPrice",required=false) String shopPrice,
@RequestParam(value = "unit",required=false) String unit ) {
...
}