Question

我有一个表单，其中当前在表单的操作中发布到硬编码的php页面，这样工作正常，它发布到DB没问题，但是对我来说事情变得棘手的是我不是想要发布到新页面，所以我选择使用ajax。所以我从表单中删除了action字段并输入了一些jquery来进行ajax调用。我遇到的问题很好......不起作用：D。有人可以看看我的js文件并向我解释我做错了什么或我应该做什么？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">

  <form>
      <p>Comment</p>
      <textarea name= "comment" rows="6" cols="50"></textarea><br />
      <input type="submit" name= "submit" value="submit" id = "submit">
    </form>

＆＃13;

$('#submit').on('click',function(){
       $.ajax({
            type        : 'POST',
            url         : 'comment.php',
            data        : formData,
            dataType    : 'json',
      })
   });

＆＃13;

Answer 1

您应该通过提交按钮的“点击”事件处理表单的“提交”事件。您还应该在函数末尾return false;以防止表单发布到新页面。您正在处理提交。此外，我会将action属性放回到表单元素上，以便在客户端上禁用JavaScript的罕见情况。给表单一个id和目标。否则你的代码是正确的。

<强> HTML

    <form id="my-form" action="comment.php" method="post">
        <!-- input fields -->
    </form>

<强>的JavaScript

    $('#my-form').on('submit', function(){ 
        // code...

        return false;
    });

在action元素上提供method属性以及form属性将使您可以在提交处理程序中访问这些属性，并为任何元素提供适当的后备JavaScript失败。对于这个实例可能没有必要，但将来可能会有所帮助。

您的处理程序现在看起来像这样：

<强>的JavaScript

    $('#my-form').on('submit', function(){ 

        // serialize the form
        var formData = $(this).serialize();

        $.ajax({
            type        : this.method,
            url         : this.action,
            data        : formData,
            dataType    : 'json'
        })
        .done(function (data) { 
            // do some stuff with 'data'
        })
        .fail(function (error) {
            // do some stuff with 'error'
        });

        return false;
    });

从提交ID进行ajax调用

1 个答案: