AJAX呼叫问题

Question

My AJAX call to a JSP works when called with drop down menu, but when called with the submit button the content disappears and the page refreshes.

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

Call to the code:

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

If I add a drop down menu then it works .

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

Answer 1

If you want to make the ajax call with submit button ,then add the submit event to the form.

if you want to prevent the button from submitting the form and perform ajax operation ,then prevent the default action

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

Answer 2

To avoid submitting of the form change the input type to button

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

Then on button click call the function

$('#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

You put the ajax request in a function, but you dont call it on the submit button like you do on the drop down menu onChange="najax();"

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

this should work or use jquery to do that for you. :)