Javascript 在php中,只能通过AJAX在数据库中插入数据。

Javascript 在php中,只能通过AJAX在数据库中插入数据。,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,这是我的add.php文件,我正在数据库中插入数据,首先我将数据库连接文件包含在这个文件中,使用POST方法提交数据,使用mysqli\u real\u escape\u string从字符串中删除特殊字符。检查空字段,链接到上一页,显示成功消息 [enter image description here][1] **add.php** I am not sure that my data is inserted through ajax or not, can anyone solv

这是我的add.php文件,我正在数据库中插入数据,首先我将数据库连接文件包含在这个文件中,使用POST方法提交数据,使用mysqli\u real\u escape\u string从字符串中删除特殊字符。检查空字段,链接到上一页,显示成功消息

[enter image description here][1]     **add.php**
 I am not sure that my data is inserted through ajax or not, can anyone solve my issue.

添加数据

您的数据是使用简单的PHP而不是通过ajax插入的。
因为在ajax中,输入值是用(“#name”)表示输入id,但您没有在输入字段中定义id属性。

您的数据是使用简单的PHP插入的,而不是通过ajax插入的。 因为在ajax中,输入值的(“#name”)表示输入id,但您没有在输入字段中定义id属性。

这应该可以:

        <html>
<head>
    <title>Add Data</title>


</head>

<body>
<?php
//including the database connection file
include_once("config.php");

    $name = $_POST['name'];
    $age =  $_POST['age'];
    $email = $_POST['email'];

    // checking empty fields
    if(empty($name) || empty($age) || empty($email)) {

        if(empty($name)) {
            echo "<font color='red'>Name field is empty.</font><br/>";
        }

        if(empty($age)) {
            echo "<font color='red'>Age field is empty.</font><br/>";
        }

        if(empty($email)) {
            echo "<font color='red'>Email field is empty.</font><br/>";
        }

        //link to the previous page
        echo "<br/><a href='javascript:self.history.back();'>Go Back</a>";
    } else { 
        // if all the fields are filled (not empty) 

        //insert data to database   
        $result = mysqli_query($mysqli, "INSERT INTO users(name,age,email) VALUES('$name','$age','$email')");



        //display success message
        //echo "<font color='green'>Data added successfully.";
        //echo "<br/><a href='index.php'>View Result</a>";

}
?>
</body>
</html>




        **add.html**
        In this file i have included all my js file creating a small table for name, age, email. my method is post. i am unable to do this task first time i am using ajax without ajax i insert data many times.
    I am not sure that my data is inserted through ajax or not, can anyone solve my issue.


        <html>
<head>
    <title>Add Data</title>
    <script src="style/jquery-3.2.1.js"></script>
    <script src="style/insert.js"></script>

</head>

<body>
    <a href="index.php">Home</a>



    <br/><br/>
    <p id="alert"><span id="show"></span></p>

        <table align="center" width="25%" border="0">
            <tr> 
                <td>Name</td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr> 
                <td>Age</td>
                <td><input type="text" name="age" id="age"></td>
            </tr>
            <tr> 
                <td>Email</td>
                <td><input type="text" name="email" id="email"></td>
            </tr>
            <tr> 
                <td></td>
                <td><input type="submit" name="Submit" id="submit" value="Add"></td>
            </tr>


    </table>
</body>
</html>






        **insert.js**
        In this file save input value in variable, my type is POST url is add.php, success function is result, my data is inserted but i am not sure that is this through AJAX or not.
    I am not sure that my data is inserted in database through ajax or not, can anyone solve my issue. 



      $(document).ready(function(e) {
    $('#submit').click(function()
    {

        var name = $('#name').val(); //save input value in variable
        var age = $('#age').val();
        var email = $('#email').val();


        $.ajax({
            data :{name:name,age:age,email:email}, 
            url  :"add.php", //php page URL where we post this data to save in database
            type :'POST',
            success: function(data){
                alert("Form submitted");
                 $('#name').val("");
                 $('#age').val("");
                 $('#email').val("");

            }
        })
    });
});
  • preventDefault
    的额外调用将停止从 发生(无论JS事件处理程序如何,这都是submit按钮的正常行为)
  • 此外,您正在尝试使用ID检索字段 您的标记中不存在的标记-您需要
    id=“name”
    (用于 实例)在您的文本框上,以使其正常工作。但是一个更简单的方法 只需使用jQuery的
    serialize()
    方法,正如我在上面演示的
  • 最后一个语法错误(应该是
    $.ajax
    而不是
    $ajax

同时,判断这是否是ajax请求的一个简单方法是是否显示了警报。如果不是,页面是否进行了完整的回发?或者是否存在某种ajax错误(在浏览器的开发人员工具-控制台和网络选项卡中)?也许可以在线学习调试JavaScript和ajax的教程,它可能会对您有所帮助

另外,使用mysqli_real_escape_字符串并不能完全安全地防止SQL注入攻击等。最好的解决方案是使用准备好的语句和参数化查询。解释了风险,并向您展示了如何使用PHP和mysqli安全地编写查询

这应该有效:

        <html>
<head>
    <title>Add Data</title>


</head>

<body>
<?php
//including the database connection file
include_once("config.php");

    $name = $_POST['name'];
    $age =  $_POST['age'];
    $email = $_POST['email'];

    // checking empty fields
    if(empty($name) || empty($age) || empty($email)) {

        if(empty($name)) {
            echo "<font color='red'>Name field is empty.</font><br/>";
        }

        if(empty($age)) {
            echo "<font color='red'>Age field is empty.</font><br/>";
        }

        if(empty($email)) {
            echo "<font color='red'>Email field is empty.</font><br/>";
        }

        //link to the previous page
        echo "<br/><a href='javascript:self.history.back();'>Go Back</a>";
    } else { 
        // if all the fields are filled (not empty) 

        //insert data to database   
        $result = mysqli_query($mysqli, "INSERT INTO users(name,age,email) VALUES('$name','$age','$email')");



        //display success message
        //echo "<font color='green'>Data added successfully.";
        //echo "<br/><a href='index.php'>View Result</a>";

}
?>
</body>
</html>




        **add.html**
        In this file i have included all my js file creating a small table for name, age, email. my method is post. i am unable to do this task first time i am using ajax without ajax i insert data many times.
    I am not sure that my data is inserted through ajax or not, can anyone solve my issue.


        <html>
<head>
    <title>Add Data</title>
    <script src="style/jquery-3.2.1.js"></script>
    <script src="style/insert.js"></script>

</head>

<body>
    <a href="index.php">Home</a>



    <br/><br/>
    <p id="alert"><span id="show"></span></p>

        <table align="center" width="25%" border="0">
            <tr> 
                <td>Name</td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr> 
                <td>Age</td>
                <td><input type="text" name="age" id="age"></td>
            </tr>
            <tr> 
                <td>Email</td>
                <td><input type="text" name="email" id="email"></td>
            </tr>
            <tr> 
                <td></td>
                <td><input type="submit" name="Submit" id="submit" value="Add"></td>
            </tr>


    </table>
</body>
</html>






        **insert.js**
        In this file save input value in variable, my type is POST url is add.php, success function is result, my data is inserted but i am not sure that is this through AJAX or not.
    I am not sure that my data is inserted in database through ajax or not, can anyone solve my issue. 



      $(document).ready(function(e) {
    $('#submit').click(function()
    {

        var name = $('#name').val(); //save input value in variable
        var age = $('#age').val();
        var email = $('#email').val();


        $.ajax({
            data :{name:name,age:age,email:email}, 
            url  :"add.php", //php page URL where we post this data to save in database
            type :'POST',
            success: function(data){
                alert("Form submitted");
                 $('#name').val("");
                 $('#age').val("");
                 $('#email').val("");

            }
        })
    });
});
  • preventDefault
    的额外调用将停止从 发生(无论JS事件处理程序如何,这都是submit按钮的正常行为)
  • 此外,您正在尝试使用ID检索字段 您的标记中不存在的标记-您需要
    id=“name”
    (用于 实例)在您的文本框上,以使其正常工作。但是一个更简单的方法 只需使用jQuery的
    serialize()
    方法,正如我在上面演示的
  • 最后一个语法错误(应该是
    $.ajax
    而不是
    $ajax

同时,判断这是否是ajax请求的一个简单方法是是否显示了警报。如果不是,页面是否进行了完整的回发?或者是否存在某种ajax错误(在浏览器的开发人员工具-控制台和网络选项卡中)?也许可以在线学习调试JavaScript和ajax的教程,它可能会对您有所帮助


另外,使用mysqli_real_escape_字符串并不能完全安全地防止SQL注入攻击等。最好的解决方案是使用准备好的语句和参数化查询。解释了风险,并向您展示了如何使用PHP和mysqli安全地编写查询

先生,我做了您提到的,先生,但无法看到警报框。如何查看“提交”按钮上的警报框如果无法查看,请按照我的建议执行操作,并在“控制台”或“网络”选项卡中的浏览器开发人员工具中查看任何错误消息。您从add.php得到了什么响应?顺便说一句,Add.php不应返回
标记等-您不能在另一个HTML文档中插入HTML文档。把那些拿走。它应该只返回HTML片段,这可以进入你的“显示”范围。我现在更新了我的代码,我正在处理上面提到的代码,你能再次看到我的代码吗?我犯了错误,我附加了调试器截图。你的调试截图没有意义。您已经在第5行暂停了,所以在第7行之前没有声明的变量将在该时刻被取消定义,这是不可避免的(当然是非常明显的)。你以为你在演示什么?了解如何使用调试器。如果要查看该行的结果,请在感兴趣的行执行后暂停代码。不管怎么说,你写的东西和我建议你做的事情没有相似之处,所以很难看出我能帮你什么。如果您尝试使用我的版本,它应该更可靠,我可以更好地帮助您。但谢谢你的合作。先生,我做了你提到的,先生,但无法看到警报框。如何查看“提交”按钮上的警报框如果无法查看,请按照我的建议执行操作,并在“控制台”或“网络”选项卡中的浏览器开发人员工具中查看任何错误消息。您从add.php得到了什么响应?顺便说一句,Add.php不应返回
标记等-您不能在另一个HTML文档中插入HTML文档。把那些拿走。它应该只返回HTML片段,这可以进入你的“显示”范围。我现在更新了我的代码,我正在处理上面提到的代码,你能再次看到我的代码吗?我犯了错误,我附加了调试器截图。你的调试截图没有意义。您已经在第5行暂停了,所以在第7行之前没有声明的变量将在该时刻被取消定义,这是不可避免的(当然是非常明显的)。你以为你在演示什么?了解如何使用调试器。如果要查看该行的结果,请在感兴趣的行执行后暂停代码。不管怎么说,你写的东西和我建议你做的事情没有相似之处,所以很难看出我能帮你什么。如果你试着做我的版本,应该更可靠,我可以帮助你更好。先生,我