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调用，则将“提交”事件添加到表单中。

如果要阻止button提交表单并执行ajax操作，则阻止默认操作

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

Answer 2

为避免提交表单，请将输入类型更改为button

<input type="button" name="Submit " id="submit" value="Submit" class="btn">

然后在按钮上单击以调用该函数

$('#submit').click(function() {
    //najax()
        //Or call the ajax directly

    $.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);
        }
    });
})

Answer 3

停止提交，如下所示

$("#formid").submit(function () { return false; });

Answer 4

甚至更好，只需使用type="button"按钮

Answer 5

您将ajax请求放入函数中，但没有像在下拉菜单onChange="najax();"在提交按钮上调用它

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

这应该工作或使用jquery为您做到这一点。 :)