एक फॉर्म सबमिट करें और jQuery

Question

के साथ 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> 

मैं जावास्क्रिप्ट (jQuery का उपयोग) है फ़ॉर्म की ऐसी गतिविधि (process_form.json) करने के लिए प्रपत्र सबमिट करें, और सर्वर से एक JSON प्रतिक्रिया प्राप्त करना चाहते हैं: मैं इस तरह एक मानक HTML प्रपत्र की है। तब मैं एक जावास्क्रिप्ट समारोह है कि JSON उत्तर के जवाब में चलाता है,

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

की तरह मैं कैसे फार्म को तार मेरी form_success विधि कॉल करने सबमिट बटन है जब किया होगा? इसके अलावा, यह ब्राउज़र को अपने नेविगेशन को ओवरराइड करना चाहिए, क्योंकि मैं पृष्ठ छोड़ना नहीं चाहता हूं। या मुझे ऐसा करने के लिए बटन को बटन से बाहर ले जाना चाहिए?

Answer 1

आप एक कॉलबैक में प्रतिक्रिया प्राप्त करना चाहते हैं, तो आप प्रपत्र पोस्ट नहीं कर सकते। फॉर्म पोस्ट करने का अर्थ है कि प्रतिक्रिया एक पृष्ठ के रूप में लोड की जाती है। आपको फॉर्म में फ़ील्ड से फॉर्म डेटा प्राप्त करना होगा और AJAX अनुरोध करना होगा।

उदाहरण:

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

सूचना आप विधि प्रस्तुत घटना हैंडल से false वापस जाने के लिए है, अन्यथा रूप भी तैनात किया जाएगा।

Answer 2

क्या आपने .getJSON() और .serialize() का उपयोग करने का प्रयास किया है?

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

• http://api.jquery.com/jQuery.getJSON/
• http://api.jquery.com/serialize/

Answer 3

आप पोस्ट अनुरोध उपयोग jQuery.post() की जरूरत है मुझे तुलना में तेजी से चौथे तर्क "json"

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

Guffa था गुजर :)