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("<div>"+jsons[i].username+"</div>");
            }
        }
    });
}

参考样例二:

// 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 () {
    }
})
}）

<div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
    <button type="button" class="btn btn-primary" id="edit_save">提交更改</button>
</div>

//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 ) {
...
}

ajax 与后台交互学习笔记小结

猜你喜欢