提交表单后，AJAX调用不起作用

Question

This is my code at www.domain-a.de/external.search.js. I call it from www.domain-b.de/test.php:

 (function ($) { // make the ajax request $.getJSON('http://www.domain-a.de/external-search.js?jsoncallback=?', function(data) { // append the form to the container $('#embedded_search').append(data); $('#embedded_search form').attr('action',''); myUrl = 'http://www.domain-a.de/get-form-values?jsoncallback=?' var frm = $('#embedded_search form'); // click on submit button frm.submit(function (ev) { $.getJSON( myUrl ) .done(function( json ) { console.log( "JSON Data: " + json ); }) .fail(function( jqxhr, textStatus, error ) { var err = textStatus + ", " + error; console.log( "Request Failed: " + err ); }); }); }); })(jQuery); 

After running this code I don't get any message in console. What is wrong with that code?

Answer 1

frm.submit(function (ev) {
  ev.preventDefault();
.....rest of code.

Answer 2

Your code is not calling the submit handler on the item, it is simply binding it. You should do the frm.submit(function binding outside of your $.getJSON callback; then inside the callback add

frm.submit()

Which triggers the event.

Also, when the submit happens, your actions will take place but then the form will submit to the back end as normal, causing a page reload.

After the line

frm.submit(function (ev) {  

Add

ev.preventDefault();

So your overall code should be

(function ($) {
  var frm = $('#embedded_search form');
  var myUrl = 'http://www.domain-a.de/get-form-values?jsoncallback=?'

  frm.submit(function (ev) {
      ev.preventDefault();

      $.getJSON( myUrl )
        .done(function( json ) {
          console.log( "JSON Data: " + json );
        })
        .fail(function( jqxhr, textStatus, error ) {
          var err = textStatus + ", " + error;
          console.log( "Request Failed: " + err );
        });
    }); 

  // make the ajax request
  $.getJSON('http://www.domain-a.de/external-search.js?jsoncallback=?', function(data) {
    // append the form to the container
    $('#embedded_search').append(data);
    $('#embedded_search form').attr('action','');


    // click on submit button
     frm.submit();  
  });      
})(jQuery);