AJAX调用没有'提交表格后无法工作

AJAX call doesn't work after submitting a form

本文关键字：表格 工作 提交 调用 AJAX      更新时间：2023-09-26

这是我在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);

运行完这段代码后，我在控制台中没有收到任何消息。那个代码出了什么问题？

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

您的代码不是在项上调用submit处理程序，而是简单地绑定它。您应该在$.getJSON回调之外执行frm.submit(function绑定；然后在回调中添加

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);
相关文章：