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

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

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

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

抱歉，代码太长，我想你可能需要所有东西。 接受任何建议

形式

表单上使用的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>';

---

使用jquery，它非常简单：

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

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

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

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

---

这里有一个教程-我不知道如何使用ajax。以前从未使用过如果你完成了教程，你将拥有你需要知道的基础知识。然后你可以从那里展开。我应该把javascript文件放在哪里？在php文件中？数据：{'title'：$'input[name=title]'.val}，-其余字段如何？无需回答上述问题。现在的问题是按钮不可点击，它只是一个添加新项目的字段，我可以在浏览器中选择和编辑文本

$(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.
            }
        });
    });
})

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