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为你做这件事。：）

AJAX调用问题

5 个答案: