Question

我正在尝试编写一个页面，其中提交了两组表单，一个用于搜索IMDB，另一个用于从返回的结果中提交请求。

我的页面工作得很好，只是常规的旧PHP。当有大量搜索和数据库调用时，我想将它转换为ajax / jquery以使其具有更好的ux。我遇到了让第二个提交按钮工作的问题。我已经搜索了很长一段时间并注意到一些关于不使用event.preventDefault（）的注释，因为之后调用的任何按钮都不起作用并且使用return false;代替。我尝试了多种组合，甚至尝试在发布第一组时加载第二组代码。所有都无济于事。

我正在努力真正了解这里发生的事情以及适当的解决方案。

所有这些都位于div #dynamic

中

剧本：

// Attach a submit handler to the form
$( "#imdb_search" ).submit(function( event ) {
    // Stop form from submitting normally
    //event.preventDefault();

    // Get some values from elements on the page:
    var $form = $( this ),
        form_request = $form.find( "input[name='request']" ).val(),
        form_user = $form.find( "input[name='user']" ).val(),
        form_username = $form.find( "input[name='username']" ).val(),
        url = $form.attr( "action" );

    // Send the data using post
    var posting = $.post(url, { 
        request: form_request, 
        user: form_user, 
        username: form_username
    });

    // Put the results in a div
    posting.done(function(data) {
        // var content = $( data ).find( "#returned_result" );
        $("#dynamic").empty().append(data);
    });
    return false;
});

所以我也从其中一条评论中尝试了这一点，但无济于事：

$( "#imdb_search" ).submit(function(){
    var $frm = $(this);
    $.ajax({
       url: $frm.attr( "action" ),
       dataType: 'html',
       type: 'POST',
       data: $frm.serialize(),
       success: function(r) {
          $("#dynamic").empty().html(r);
       },
       error: function(){
          //TODO: add error code
       }
    });
return false;
});

我在成功返回时加载的每个新php页面的底部都有这个脚本。这是DOM的正确位置吗？两种表单都具有相同的ID，但提交了不同的＆＃34;输入＆＃34;。

Answer 1

正如我从你的代码中得到的那样，当你得到第一个结果时你也会覆盖html表单，如果是这种情况那么你应该使用jquery“on”函数

$(document).on("#imdb_search", "submit", function(){
var $frm = $(this);
$.ajax({
   url: 'your_post_url',
   dataType: 'html',
   type: 'POST',
   data: $frm.serialize(),
   success: function(r) {
      $("#dynamic").html(data);
   },
   error: function(){
      //TODO: add error code
   }
});
return false;
});

并确保不要用其他代码覆盖此代码。

Ajax / JQuery 2nd提交

1 个答案: