Question

这是我的代码：

HTML代码：

final Handler handler = new Handler();
        Timer timer = new Timer();
        TimerTask doAsynchronousTask = new TimerTask() {       
            @Override
            public void run() {
                handler.post(new Runnable() {
                    public void run() {       
                        try {

                            // update data 
                        } catch (Exception e) {
                            // TODO Auto-generated catch block
                        }
                    }
                });
            }
        };
        timer.schedule(doAsynchronousTask, 0, 5000); //execute in every 5000 ms or 5 secs
    }

Insert.JS

预期结果：当用户点击$('.myform').submit(function(){ return false; }); $('.insert').click(function(){ $.post( $('#.yform').attr('action'), $('.myform :input').serializeArray(), function(result){ $('.result').html(result); } ); });按钮时，代码会在后台运行Insert文件（无法重新加载页面），并在此内显示结果insert.php

原始结果：只有第一个<p id='result'></p>按钮代码有效。另一个insert按钮会将用户重定向到insert。

我知道，这可能是因为insert.php。但我不知道，如何解决它。我想只在我的Jquery代码中进行更改。我不想为每个表单添加不同的类。

Answer 1

您可以覆盖默认表单的提交行为，而不是处理点击事件，并使用$(this)仅适用于提交的表单。

$(".myform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var resultDiv = $(this).find(".result");
  $.post(url, data, function(result) {
    resultDiv.html(result);
  });
  return false;
});

抓取表单并覆盖其提交功能
从正在提交的表单中获取数据
从此表单中获取要发布的网址
抓住直接子结果（而不是所有结果）
传递你自己的成功函数来做任何你需要的事情，在这种情况下追加结果

如果您想立即从所有表单发布数据，请修改此代码。

Answer 2

先生，我想你需要尝试像这样的Just Ajax代码。

 $.ajax({
            url: 'URL_OF_YOUR_PAGE',
            data:  $('.myform :input').serializeArray(),
            type: 'POST',
            dataType: 'json',
            success: function (r) {
                //SUCCESS CODE
           }
    });

Answer 3

如果您要提交第二个表单，请在该表单中附加一个ID，然后按该ID提交表单数据。如果您提供的代码很好，则应该使用此代码。如果您的三个表单具有相同的类，那么您无法仅从jquery端唯一地捕获该表单。

＆＃13;

$('.myform').on('submit',function(e){
    e.preventDefault();
});


$('.insert').click(function(){
    $.post(     
        $('.myform').attr('action'),
        $('#secondForm').serializeArray(),
        function(result){
            $('.result').html(result);
        }
    );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='insert.php' method='post' id="firstForm" class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' id="secondForm" class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' id="thirdForm" class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

＆＃13;

Answer 4

你的js代码有错误。改变如下：

$('.insert').click(function(){
    $.post(     
        $('.myform').attr('action'),
        $('.myform :input').serializeArray(),
        function(result){
            $('.result').html(result);
        }
    );
});

jquery选择器错误

Answer 5

您可以使用带有多个选项的jQquery AJAX方法，并且您需要在单击后禁用该按钮，这将避免向服务器发出多个请求。

//button click
$(".insert").click(function(e){

        //get the form data and serialize 
        var dataString = $(".myform").serialize();

        //make the AJAX request, dataType is set to json
        $.ajax({
            type: "POST",
            url: "SERVER_URL",
            data: dataString,
            dataType: "json",

            //response from the server
            success: function(data) {
                console.log("SUCCESS");
            },

            //No response from the server
            error: function(xhr){
                console.log("ERROR :" + xhr.statusText);
            },

            //capture the request before it was sent to server
            beforeSend: function(){
                // disable the button
                $(this).attr("disabled", true);
            },

            //after the response
            complete: function(){
                //enable the button 
                $(this).attr("disabled", false);
            }

        });        
});

Answer 6

您可以使用closest

在点击处理程序中获取对表单的引用

 var theForm = $(this).closest('form');

然后，您可以阅读该表单的操作并序列化表单数据：

$('.insert').click(function(){
    var theForm = $(this).closest('form');
    $.post(     
        theForm.attr('action'),
        theForm.serializeArray(),
        function(result){
            $('.result').html(result);
        }
    );
    return false;
});

这是一个模拟，它使用相同的方法将表单数据输出到文本框中：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id0'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id1'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id2'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<textarea id='out' style="width:600px;height:250px"></textarea>
<script src='insert.js'></script>

<script>

$('.myform').submit(function(){
    return false;
});

$('.insert').click(function(){
   var theForm = $(this).closest('form');
   var mockData= {};
   mockData["action"] = theForm.attr('action');
   mockData["data"] = theForm.serializeArray();
   $('#out').val(JSON.stringify(mockData));
   /* $.post(     
        theForm.attr('action'),
        theForm.serializeArray(),
        function(result){
            $('.result').html(result);
        }
        return false;
    );
    */
});
</script>

＆＃13;

Answer 7

试试这个

HTML code：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form action='insert.php' method='post' class='myform' >
        <input type='hidden' name='tmdb_id' value='2'/>
        <button class='insert'>Insert</button>
        <p class='result'></p>
    </form>

    <form action='insert.php' method='post' class='myform' >
        <input type='hidden' name='tmdb_id' value='3'/>
        <button class='insert'>Insert</button>
        <p class='result'></p>
    </form>

    <form action='insert.php' method='post' class='myform' >
        <input type='hidden' name='tmdb_id' value='6'/>
        <button class='insert'>Insert</button>
        <p class='result'></p>
    </form>

    <script src='insert.js'></script>

insert.js code：

$('.myform').submit(function(){
        return false;
});
var elements = document.getElementsByClassName("insert");

$('.insert').click(function(){
  for (var i = 0, len = elements.length; i < len; i++) {
    if(elements[i]===this){
      var j=i;
      $.post(
        $(document.getElementsByClassName("myform")[j]).attr('action'),
        $(document.getElementsByClassName("myform")[j]).serializeArray(),
        function(data){
          $(document.getElementsByClassName("result")[j]).html(data);
        }
      );
    }
  }
});

insert.php代码：

var_dump($_POST);

在不重新加载页面的情况下将数据插入MySQL（Jquery）

7 个答案: