使用ajax提交表单答案

【问题标题】：Submit form using ajax使用ajax提交表单
【发布时间】：2026-01-25 00:10:02
【问题描述】：

我正在尝试使用 jquery 将值提交到数据库。我是 ajax 新手，但我必须使用 ajax。

这是我到目前为止所做的，我的 php 代码是

 function insertSeries()
{
    $options = array(
        'user' => $_POST['user'],
        'email' => $_POST['email'],
        'summary' => $_POST['summary'],
        'due_date' => $_POST['due_date'],
        'problem_type' => $_POST['problem_type'],
        'status' => $_POST['status']
    );

    $sql = "insert into ticket_summary('user','email','summary','due_date','problem_type','status') Values (?,?,?,?,?,?)";
    $result = mysql_query($sql, $options) or die('Could not insert data');


}

我的html代码是

  <?php
   include 'eric_api.php';
  ?>

  <!DOCTYPE html>

   <html>
<head>
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/api_calls.js"></script>
    <link rel="stylesheet" href="css/normalizer.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="wrapper">
        <h1>Ticketing System</h1>
        <div>
            <div id="ticket_form_wrapper">
                <form  id="insert_ticket" method="post" action="">
                    <p>
                        <label for="user">User</label>
                        <br />
                        <input type="user" id="user" class="post_fields" />
                    </p>
                    <p>
                        <label for="email">Email</label>
                        <br />
                        <input type="email" id="email" class="post_fields" />
                    </p>
                    <p>
                        <label for="summary">Summary</label>
                        <br />
                        <input type="summary" id="summary" class="post_fields" />
                    </p>
                    <p>
                        <label for="due_date">Due Date</label>
                        <br />
                        <input type="due_date" id="due_date" class="post_fields" />
                    </p>
                    <p>
                        <label for="problem_type">Problem Type</label>
                        <br />
                        <input type="problem_type" id="problem_type" class="post_fields" />
                    </p>
                    <p>
                        <label for="status">Status</label>
                        <br />
                        <input type="status" id="status" class="post_fields" />
                    </p>
                    <p>
                        <input type="submit" id="submit" value="Submit" />
                        <input type="button" onclick="window.location='index.php'" value="Go to List"/>
                        <div class="form_result"> </div>
                    </p>
                </form>
            </div>

        </div>
</body>
  </html>

这是我使用 jquery 的 ajax

$('#insert_ticket').submit(function(e){
    var postData = $(this).serialize();
    alert(postData);

    $.ajax({
        type: 'POST',
        url: 'http://localhost/api/eric_api.php?q=insertseries',
        data: postData,
        success: function(response){
            $('#insert_ticket').find('.form_result').html(response);
        },
        error: function(){
            alert('error');
        }
    });
    e.preventDefault();
});

我不知道我做错了什么。任何帮助将不胜感激

【问题讨论】：

哪里有问题？控制台错误在哪里？
它在做什么？我认为您可能需要将global $_POST; 添加到您的函数insertSeries() 因为范围。或将其传递给函数。
@user623952 $_POST 是一个超全局的，它无处不在
哦，好的。酷..但也！这也不是mysql_query 的正确用法……而且您设置查询就像使用mysqli_ 函数一样。代码能走多远？它甚至到达insertSeries() 吗？还是在那之前失败了？
那么您遇到了什么问题？什么不起作用？

标签： php jquery ajax post

【解决方案1】：

不是干扰表单的提交事件，而是干扰点击事件。要对现有设置进行最小的更改，只需将点击处理程序添加到表单提交按钮。处理程序内部的第一件事，调用 e.preventDefault()。您必须在处理程序中显式选择表单才能序列化数据。然后，将现有的 ajax 调用移动到该处理程序中，它应该可以正常工作。此外，请确保您实际上是在 PHP 代码中的某处调用 insertSeries()。

干杯

【讨论】：

只是想知道，据我所知，b/c 我经常做这样的事情，按照你的建议做有好处吗？
在某些浏览器中干扰表单中的提交事件可能会变得很麻烦。 XMLHttp 请求和表单只是非常相切相关，因此将一个与另一个耦合会创建一种实际上不存在的关系。通过将代码放入单击处理程序中，您还可以选择在将来远离表单。假设两个月后，获取信息的新途径变得可用。旧函数可以作为不同的处理程序重用，而不是编写新函数。
我不知道。我一直在以另一种方式看待它……就看起来自然和“相关”而言。不过，下次我写东西的时候我会这样做。让浏览器开心总是首选。

【解决方案2】：

请回复一些 cmets，以便我们帮助找出问题所在。这就是您的函数在正确的mysqli 语法下的外观。

如何建立连接： $mysql = new mysqli(...)
如何准备声明：$stmt = $mysqi->prepare(....)
如何绑定参数：$stmt->bind_param(...)
执行：$stmt->execute()

注意：您将插入字符串设置为用于mysqli，但您的参数绑定更类似于pdo。我不确定您要使用哪一个，所以我选择了mysqli。我个人更喜欢PDO，不过……所以如果你愿意，我可以用它来重写它。 Link to the PDO Prepare Function that also shows some binding.

 // this is your database connection for mysqli 
 $mysqli = new mysqli('localhost', 'my_user', 'my_password', 'world');

 function insertSeries($mysqli)
 {
    $options = array(
        'user' => $_POST['user'],
        'email' => $_POST['email'],
        'summary' => $_POST['summary'],
        'due_date' => $_POST['due_date'],
        'problem_type' => $_POST['problem_type'],
        'status' => $_POST['status']
    );

    $sql = "insert into ticket_summary('user','email','summary','due_date','problem_type','status') 
                                    Values (?,     ?,        ?,         ?,            ?,        ?)";


    if ( $stmt = $mysqli->prepare($sql) )
    { 
        $stmt->bind_param("ssssss", $options['user'], $options['email'],
                                     $options['summary'], $options['due_date'], 
                                     $options['problem_type'], $options['status']);

        $success = $stmt->execute();

        if ($success) { print "query worked"; }
              else    { print "query failed"; }
    } 
 }

【讨论】：

好的，让我试试看是否适合我，感谢您的快速回复
@EricEvans - 你能回复一些 cmets 吗？你的代码在哪里失败了？我重写了函数 b/c 我可以看到明显的错误，但这也可能是您的 ajax 的问题。你有任何错误吗？正在达到什么代码？你有任何输出吗？
ajax 可以工作，因为它确实到达了我的 php 代码，但它说我的 sql 有问题并且我的索引未定义。你能告诉我在哪里可以看到这样连接的mysqli。您创建了一个对象，但我正在查看 php 网站，但找不到这样做的方法。请给我一个参考。
我在帖子顶部提供了一些指向文档的链接。
感谢大家的帮助和资源，我们现在都很好。