如何将表单响应更改为ajax响应？

Question

我有一个使用 php 文件的表单。该表单允许用户： - 为标题/价格/描述输入 3 个文本字段 - 为他的产品选择一张图片 - 从下拉列表中选择一个表（选项是表值）

正如您在用户按下提交按钮后在我的代码中看到的那样，浏览器重定向到另一个页面，说“1 条记录是成功添加的”。

我希望用户点击表单上的提交按钮后，会出现一条 (javascript/ajax) 消息，让他知道记录已成功添加。

对不起，编码太长了，我想你可能需要所有东西。 接受任何建议

表格

<div id="addForm">
     <div id="formHeading"><h2>Add Product</h2></div><p>

    <form id = "additems" action="../cms/insert.php" enctype="multipart/form-data" method="post"/>
      <label for="title">Title: </label><input type="text" name="title"/>
      <label for="description">Desc: </label><input type="text" name="description"/>
      <label for="price">Price: </label><input type="text" name="price" />
      <label for="stock">Quan: </label><input type="text" name="stock" />
      <p>
<small>Upload your image <input type="file" name="photoimg" id="photoimg" /></small>

<div id='preview'>
</div>

     <select name="categories">
              <option value="mens">Mens</option>
              <option value="baby_books">Baby Books</option>
              <option value="comics">Comics</option>
              <option value="cooking">Cooking</option>
              <option value="games">Games</option>
              <option value="garden">Garden</option>
              <option value="infants">Infants</option>
              <option value="kids">Kids</option>
              <option value="moviestv">Movies-TV</option>
              <option value="music">Music</option>
              <option value="women">Women</option>
    </select>

           <input type="submit" name="Submit" value="Add new item">
          </form>
  </div>

insert.php（用于表单）

session_start();
$session_id='1'; //$session id
$path = "../cms/uploads/";

    $valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
        {
            $name = $_FILES['photoimg']['name'];
            $size = $_FILES['photoimg']['size'];

            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {
                    if($size<(1024*1024))
                        {
                            $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                                {

$table = $_POST['categories'];
$title = $_POST['title'];
$des = $_POST['description'];
$price = $_POST['price'];
$stock = $_POST['stock'];
    $sql="INSERT INTO $table (title, description, price, image, stock)
    VALUES
    ('$title','$des','$price','$path$actual_image_name','$stock')";

    if (!mysqli_query($con,$sql))
    {
        die('Error: ' . mysqli_error($con));
    }
    echo "<h1>1 record added into the $table table</h1>";
    echo '<button onclick="goBack()">Go Back</button>';

Answer 1

使用 jquery 非常简单：

只需执行以下操作： 第一件事，删除输入中的 type="submit" 并给它一个唯一标识符，如下所示：

<input id="submit_form" name="Submit" value="Add new item">

第二件事，在你的 javascript 文件中，做：

$(document).ready(function(){
    $('input#submit_form').on('click', function() {
        $.ajax({
            url: 'addnew.php',// TARGET PHP SCRIPT
            type: 'post'      // HTTP METHOD
            data: {
                'title' : $('input[name="title"]').val()
            },
            success: function(data){
                alert(data); // WILL SHOW THE MESSAGE THAT YOU SHOWED IN YOUR PHP SCRIPT.
            }
        });
    });
})

第三件事，在你的 php 文件中： 做同样的事情，但只是做：

die("1 record added into the $table table")