提交表單並通過jQuery獲得JSON響應

我期望這很容易，但我沒有在如何執行此操作的任何地方找到簡單的解釋。我有一個標準的HTML表單是這樣的：提交表單並通過jQuery獲得JSON響應

<form name="new_post" action="process_form.json" method=POST> 
     <label>Title:</label> 
     <input id="post_title" name="post.title" type="text" /><br/> 

     <label>Name:</label><br/> 
     <input id="post_name" name="post.name" type="text" /><br/> 

     <label>Content:</label><br/> 
     <textarea cols="40" id="post_content" name="post.content" rows="20"></textarea> 
    <input id="new_post_submit" type="submit" value="Create" /> 
</form>

我想了JavaScript（使用jQuery）提交表單到窗體的動作（process_form.json），並接收來自服務器的JSON響應。然後，我將有一個響應JSON響應運行的JavaScript函數，如

function form_success(json) { 
    alert('Your form submission worked'); 
    // process json response 
    }

如何聯結起來的形式提交按鈕打電話給我form_success方法完成時？此外，它應該重寫瀏覽器自己的導航，因爲我不想離開頁面。或者我應該將按鈕移出表單來做到這一點？

來源

2010-06-02 Leopd

如果你想在回調的響應，你不能發佈形式。發佈表單意味着響應作爲頁面加載。您必須從表單中的字段獲取表單數據併發出AJAX請求。

例子：

$(function(){ 
    $('form[name=new_post]').submit(function(){ 
    $.post($(this).attr('action'), $(this).serialize(), function(json) { 
     alert(json); 
    }, 'json'); 
    return false; 
    }); 
});

請注意，您必須從處理該提交事件的方法返回false，否則的形式也將被公佈。

來源

2010-06-02 18:16:46 Guffa

您是否嘗試過使用.getJSON()和.serialize()？

$('form').submit(function() { 
    $.getJSON('ajax/test.json?' + $(this).serialize(), function(data) { 
     $('.result').html('<p>' + data.foo + '</p>' 
     + '<p>' + data.baz[1] + '</p>'); 
    }); 
});

來源

2010-06-02 18:16:09 gurun8

如果提交使用GET而不是POST這是非常有用的。你仍然需要在提交回調中添加'return false'。 – Max 2014-04-28 15:29:16

如果需要POST請求使用jQuery.post()傳遞第四個參數「JSON」

$(function(){ 
    $("form").submit(function(){ 
    $.post($(this).attr("action"), $(this).serialize(), function(jsonData){ 
     console.log(jsonData); 
    }, "json"); 
    }); 
});

Guffa是比我快:)

來源

2010-06-02 18:24:59 Anpher

提交表單並通過jQuery獲得JSON響應

回答

相關問題