【问题标题】：connecting HTML to PHP file using ajax [closed]使用ajax将HTML连接到PHP文件[关闭]
【发布时间】：2016-07-07 22:43:36
【问题描述】：

我已经使用 xampp（apache 和 mysql）创建了一个应用程序。我有以下 HTML 代码：

     <!DOCTYPE html>
        <html>
        <head>
        <title>Name</title>
        </head>
        <body>

    <div id="main">
    <h1>Details</h1>
    <div id="name">
    <h2>Name</h2>
    <hr/>

    <Form Name ="form1" Method ="POST" ACTION = "name.php">

    <label>Name: </label>
    <input type="text" name="per_name" id="name" required="required" placeholder="please enter name"/><br/><br />

    <label>Age: </label>
    <input type="text" name="per_age" id="age" required="required" placeholder="please enter age"/><br/><br />

<input type="submit" value=" Submit " name="submit"/><br />

      </form>
     </div>    
    </div>   
   </div>   
  </body>
</html>

以及以下 PHP 代码：

<?php
if(isset($_POST["submit"])){
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "details";

$connection = new mysqli($servername, $username, $password, $dbname);


if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
}

$sql = "INSERT INTO persons (person_name, person_age)
VALUES ('".$_POST["per_name"]."','".$_POST["per_age"]."')";

if ($connection->query($sql) === TRUE) {
echo "person added";
} else {
echo "person not added";
}

$connection->close();
}
?>

我将如何创建一个简单的 ajax 文件来调用 PHP 文件，而不是使用 <Form Name ="form1" Method ="POST" ACTION = "name.php"> 调用 php 文件？我试图这样做，但似乎无法到达任何地方，有人可以帮助我吗？ AJAX：

$(document).ready(function(){
$("#submit").click(function(){

// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "name.php",
data: dataString,
cache: false,
success: function(result){
alert(result);

});
}
return false;
});
});

【问题讨论】：

有什么错误吗？ js, php, mysql...反正你没有提交ID
"can't seem to get anywhere" - 也许你可以稍微更具体一点？这实际上以什么方式失败了？
欢迎来到 Stack Overflow！您当前的代码有 SQL 注入，这意味着任何人都可以读取或销毁任何数据。请阅读：How can I prevent SQL-injection in PHP?

标签： javascript php html mysql ajax

【解决方案1】：

更好地处理表单提交：在表单中添加 ID：

<Form id="form1">

然后：

$(document).ready(function(){
    $("#form1").submit(function(e) {
        e.preventDefault();

       $.post('name.php', $('#form1').serialize(), function(data) {
           alert(data);
       });
       return false;
});

【讨论】：

不会在每次客户点击表单时触发吗？事件处理程序不应该监听提交事件而不是点击事件吗？
好的...谢谢你的评论。我编辑。

【解决方案2】：

在表格中

在<form>中删除这些

Method ="POST" 
ACTION = "name.php"

在submit按钮中添加ID

<input type="submit" value=" Submit" id="submit" name="submit"/>

在 AJAX 中

<script>
    $(function(){
        $( "#submit" ).click(function(event)
        {
            event.preventDefault(); # add this ++Important++ 
            var name= $("#name").val();
            var age= $("#age").val();

            $.ajax(
                {
                    type:"post",
                    url: "name.php",
                    data:{ name:name, age:age },
                    success:function(result)
                    {
                        alert(result);
                    }
                });
        });
    });
</script>

【讨论】：

如果使用preventDefault(); 很重要，解释为什么不同样重要吗？我同意 preventDefault(); 应该在表单中使用，但是由于 OP 将删除 action 和 method 属性，表单标签有什么用？为什么不完全删除表单标签，因为该函数没有监听提交事件...
您好，我已经进行了这些更改，但用户名和年龄并没有保存到数据库中，一旦点击页面上的提交按钮刷新？
@userps1990 在插入页面时跟踪您的错误。首先检查提交按钮将您的数据发送到name.php