javascript - AJAX 调用问题

Question

当使用下拉菜单调用时，我对 JSP 的 AJAX 调用有效，但是当使用提交按钮调用时，内容会消失并且页面会刷新。

function najax() {
    $.ajax({
        url:"testjsp.jsp",
        type: "post",
        data: {
            crid: crid,
            sid: sid,
            ttid: ttid
        },
        async: false,
        cache: true,
        error: function(xhr, status, error) {
            alert("error" + error);
            alert("xhr" + xhr);
            alert("status" + status);
        },
        sync: true,
        success: function(responseText) {
            $("#disp_span").html(responseText);
        }
    });
}

调用代码:

<input type="submit" name="Submit " id="submit"  value="Submit" class="btn"  onClick="najax();" ></input>

如果我添加一个下拉菜单，那么它就可以工作。

<select name="select_menu1" onChange="najax();">
    <option value=" ">Select</option>
    <option value="cr_id">SUBMIT</option>
    <option value="sr_id">CANCEL</option>

Answer 1

如果你想使用submit按钮进行ajax调用，那么将submit事件添加到表单中。

如果您想阻止按钮提交表单并执行ajax操作，则阻止默认操作

   $('#submit').click(function(e){
         e.preventDefault();
        ....//ajax call 
    });