如何将表单响应转换为ajax响应？

Question

我有一个表单，它使用了一个php文件。形式让用户： - 输入3标题/价格/说明 - 选择为自己的产品 图像 - 选择从下拉列表的表格文本字段（选项表中的值）

正如你看到的我的代码在用户按下提交按钮后，浏览器重定向到另一页，并说“1条记录是成功的加法器”。

我希望它是像用户单击表单上的提交按钮后，会出现（javascript/ajax）消息，让他知道记录已成功添加。

对不起，我想你可能需要一切。 OPEN TO任何建议

形式

<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它很简单：

只要做到以下几点：1 在你的输入中删除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. 
      } 
     }); 
    }); 
}) 

3ND的事情，在你的PHP文件： 做同样的事情，但只是做：

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