Fatal编程技术网
  • javascript/
  • Javascript 使用Ajax和PHP插入数据库（mysql）

Javascript 使用Ajax和PHP插入数据库（mysql）

javascript php html mysql ajax

Javascript 使用Ajax和PHP插入数据库（mysql）,javascript,php,html,mysql,ajax,Javascript,Php,Html,Mysql,Ajax,我正在尝试将表单中的数据插入mysql数据库。我认为问题在于，我在HTML中使用按钮的地方，因此我复制了所有的按钮。任何帮助都将不胜感激 当我点击submit按钮时，页面闪烁，数据库中没有插入任何内容。它应该显示一个绿色框，表示记录已在html页面上提交 因为有些人更担心的是我在建立一个认证系统，那么到底出了什么问题。这不是一个身份验证系统，它只是一个如何插入mysql数据库的示例 Index.html Ajax引导示例 .习俗{ 左边距：200px； } 使用Ajax插入数据 id=“显示

我正在尝试将表单中的数据插入mysql数据库。我认为问题在于，我在HTML中使用按钮的地方，因此我复制了所有的按钮。任何帮助都将不胜感激

当我点击submit按钮时，页面闪烁，数据库中没有插入任何内容。它应该显示一个绿色框，表示记录已在html页面上提交

因为有些人更担心的是我在建立一个认证系统，那么到底出了什么问题。这不是一个身份验证系统，它只是一个如何插入mysql数据库的示例

Index.html 

Ajax引导示例
.习俗{
左边距：200px；
}
使用Ajax插入数据



id=“显示”





名称
电子邮件
密码
性别
男性
女性
提交
首先，您附加到ID为“submit”的元素的jQuery事件处理程序永远不会启动，因为它与html中的任何元素都不匹配。将html更改为如下内容：

提交

然后，您需要稍微修改一下SQL语法。您的查询是：


$q=“插入用户值（“，$name”，“$email”，“$password”，“$gender”）”

您告诉mysql将这些值插入“user”表，但不告诉它要插入哪些列。你需要这样的东西：


$q=“插入用户（姓名、电子邮件、密码）值（“$name”、“$email”、“$password”、“$gender”）”


我假设你的值中的空白字符串应该为插入的ID保留一个点…如果你在你的DB表中自动增加了你不必包括空白字符串。这只是解决问题的一个开始，但如果您提供更多关于所收到错误的详细信息，我们可能会提供更多帮助
 无论如何，这段特殊的代码可以允许插入到数据库中，尽管在某些地方仍然存在一些问题，我无法找到。

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example with Ajax</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
      $(function () {
        $('button').click(function () {
          var name2 = $('#name').val();
          var email2 = $('#email').val();
          var password2 = $('#password').val();
          var gender2 = $('#gender').val();
          console.log('starting ajax');
          $.ajax({
            url: "./insert.php",
            type: "post",
            data: { name: name2, email: email2, password: password2, gender: gender2 },
            success: function (data) {
              var dataParsed = JSON.parse(data);
              console.log(dataParsed);
            }
          });

        });
      });

    </script>

    <style>
      .custom{
         margin-left:200px;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <h2 class="text-center">Insert Data Using Ajax</h2>

      <form class="form-horizontal" >
        <div class="form-group">
          <label class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input class="form-control" name="name" id="name" type="text" placeholder="Enter you name">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input class="form-control" name="email" id="email" type="text" placeholder="Your Email...">
          </div>
        </div>
          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input class="form-control" name="password" id="password" type="text" placeholder="Your Password...">
            </div>
          </div>
          <div class="form-group">
            <label for="gender" class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-10">
              <select id="gender" class="form-control">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
      </form>
    </div>
  </body>
</html>




Ajax引导示例
$（函数（）{
$（“按钮”）。单击（函数（）{
var name2=$（'#name'）.val（）；
var email2=$（'#email'）.val（）；
var password2=$（'#password'）.val（）；
var gender2=$（'#gender'）.val（）；
log（“启动ajax”）；
$.ajax({
url:“./insert.php”，
类型：“post”，
数据：{name:name2，email:email2，密码：password2，性别：gender2}，
成功：功能（数据）{
var dataParsed=JSON.parse（数据）；
console.log（数据解析）；
}
});
});
});
.习俗{
左边距：200px；
}
使用Ajax插入数据
名称
电子邮件
密码
性别
男性
女性
提交


insert.php


<?php

    //Create connection
  $connection = mysqli_connect('localhost', 'root', '', 'dbase');
    if($_POST['name']){
      $name = $_POST['name'];
      $email = $_POST['email'];
      $password= $_POST['password'];
      $gender = $_POST['gender'];

      $q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')";

      $query = mysqli_query($connection, $q);

      if($query){
          echo json_encode("Data Inserted Successfully");
          }
      else {
          echo json_encode('problem');
          }
      }

?>



到底是什么问题？什么不起作用？您意识到这永远不会关闭
echo“成功插入数据”
，并且应该向您抛出一个关于它的解析错误。您也没有告诉我们您可能会遇到什么错误（如果您正在检查错误的话）、它在做什么、回声等。所以，请检查它和控制台。当我点击提交按钮时，它只会闪烁页面，数据库中没有任何内容。页面顶部应显示一个绿色框，显示其添加的记录。我们也不知道您是否安装了Web服务器/php等，如果是本地的，是否使用了正确的url。我看到语句
$（'#submit'）。单击（function（）{
但是我找不到
submit
id？非常感谢您的详细建议，您是对的，我已经设置了自动增量。我创建了对按钮的更改，但它仍然没有插入数据库（和php）。您是否有对数据库所在服务器的ssh访问权限？如果有，您可以查看Apache错误日志，这些日志可能会告诉您插入不起作用的原因。为了帮助您，我们需要有关抛出哪些错误以及代码运行环境的详细信息。如果没有，请设置错误报告要了解导致脚本失败的原因的更多详细信息，请访问php脚本中的-1：我必须重写绿色弹出窗口，上面写着“成功”！但非常感谢您，这非常好！如何在索引屏幕中查看ajax resonse