使用ajax提交表单

小编典典

使用ajax提交表单

ajax

我正在尝试使用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();
});

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

阅读 214

2020-07-26

共1个答案

小编典典

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

干杯

2020-07-26