Question

我有关于从通过ajax加载到div中的表单插入和更新MySQL数据库的问题。我已经从不同的网站上采取了各种示例来检查我是否是一个错误，但是当页面被独立加载并插入或修改到数据库时它们都可以工作。当表单加载到div中时，输入完成并提交，然后重定向到脚本文件中定义的主页，但没有信息插入到数据库中：

 (ajax_url.length < 1) {
        ajax_url = 'app/pages/home.php';
    }

正如我所说，如果我直接加载表单页面，表单可以正常工作并插入。出于这个原因，我还尝试了以下内容，同时为表单提供了“dataforms”的id，并且提交按钮的id为“sub”：

$("#sub").click( function() {
 $.post( $("#dataforms").attr("action"),
         $("#dataforms :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
clearInput();
});
 
$("#dataforms").submit( function() {
  return false;
});
function clearInput() {
    $("#dataforms :input").each( function() {
       $(this).val('');
    });
}

有什么基本的东西我完全不见了吗？

这是我试图开始工作的一个例子：

    <?php
        include_once('/config.php');
        $task_name = $_POST['task_name'];
       
        if(mysql_query("INSERT INTO task (task_name) VALUES('$task_name')"))
         echo "Successfully Inserted";
        else
        echo "Insertion Failed";
?>

    <span id="result"></span>

    <form id="dataforms" action="" method="post">

        <label id="first"> Task Name</label><br/>
        <input type="text" name="task_name"><br/>


        <button id="sub">Save</button>

    </form>

我还尝试在一个单独的文件中定义php并在操作中调用它，我最终得到的结果似乎没有传递的值，因为我收到错误显示$ task_name未定义。

页脚中引用了js脚本文件，并且数据表显示和从数据库中选择数据没有问题，所以我猜它与表单的提交方式和重新加载有关。在涉及ajax时，我是否需要以不同方式处理表单提交？我已经使用各种插入和更新脚本进行测试，并且所有行为都采用相同的方式。

Answer 1

首页 - 可以是.html或.php，不重要：

<span id="result"></span>
<form id="dataforms" action="insert-task.php" method="post">
   <label id="first"> Task Name</label><br/>
   <input type="text" name="task_name"><br/>

   <button id="sub">Save</button>
</form>

<script src="https://code.jquery.com/jquery-3.2.0.min.js"
    integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
    crossorigin="anonymous"></script>

<script>
    $("#sub").click( function() {
        $.post( 
            $("#dataforms").attr("action"),
            $("#dataforms :input").serializeArray(),
            function(info){ 
                $("#result").html(info);
            });
        clearInput();
    });

    $("#dataforms").submit( function() {
        return false;
    });

    function clearInput() {
        $("#dataforms :input").each( function() {
            $(this).val('');
        });
    }
</script>

第二页 - insert-task.php：

<?php         
    //include_once('/config.php');
    $task_name = $_POST['task_name'];
    //if(mysql_query("INSERT INTO task (task_name) VALUES('$task_name')")) 
    // echo $task_name; die;
    if(true) 
        echo "Successfully Inserted";         
    else
        echo "Insertion Failed"; 
?>

这两页确实协同工作。虽然有几点需要注意，请：

数据库操作还不是可执行代码的一部分。
但是，如果取消注释// echo $task_name; die;，那么第一页中的<span>将填充输入字段中键入的任何值，这将确定form数据是正确地转发到后端。

编辑：

要处理required字段，请在第一页中进行以下更改：

摆脱click

$("#sub")

提交dataforms时阻止默认提交操作

因此，实际上，更新的代码如下所示：

<span id="result"></span>
<form id="dataforms" action="insert-task.php" method="post">
    <label id="first"> Task Name</label><br/>
        <input type="text" name="task_name" required><br/>
        <button id="sub">Save</button>
</form>

<script src="https://code.jquery.com/jquery-3.2.0.min.js"
    integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
    crossorigin="anonymous"></script>


<script>
    $("#dataforms").submit( function(e) {
        e.preventDefault();
        $.post( 
            $("#dataforms").attr("action"),
            $("#dataforms :input").serializeArray(),
            function(info){ 
                $("#result").html(info);
            }
        );
        clearInput();
        return false;
    });

    function clearInput() {
        $("#dataforms :input").each( function() {
            $(this).val('');
        });
    }
</script>

如果在Please fill out this field字段中未输入任何数据，则会显示input消息，同时防止因成功提交后清除字段而导致意外弹出。< / p>

mysqli插入/更新和ajax问题

1 个答案: