Контакт AJAX не работает после отправки формы

Question

Это мой код на www.domain-a.de/external.search.js. Я называю это из 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);

После выполнения этого кода я не получаю никаких сообщений в консоли. Что не так с этим кодом?

Answer 1

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

Answer 2

Ваш код не вызывает обработчик submit по этому товару, он просто привязывает его. Вы должны сделать привязку frm.submit(function за пределами своего обратного вызова $.getJSON; затем в обратном вызове добавить

frm.submit() 

Что вызывает событие.

Также, когда выполняется передача, ваши действия будут выполнены, но форма будет отправлена ​​на задний конец как обычно, что приведет к перезагрузке страницы.

После строки

frm.submit(function (ev) { 

Добавить

ev.preventDefault(); 

Таким образом, ваш общий код должен быть

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