Question

我正在尝试将表单中的数据插入到mysql数据库中。我认为问题所在的地方是我在HTML中使用按钮的地方因此我将其全部复制过来。任何帮助，将不胜感激！

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

因为有些人更担心我建立一个身份验证系统然后错了。这是 NOT 一个身份验证系统，它只是一个如何插入mysql数据库的示例。

的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 src="js/insert.js"></script>
	
	<style>
	 .custom{
	 	margin-left:200px;
	 }
	</style>
</head>
<body>

<div class="container">
	<h2 class="text-center">Insert Data Using Ajax</h2>
	
	<br/>
	<p id="alert" style="display:none;" class="alert alert-success text-center"><i class="glyphicon glyphicon-ok"></i><span> id="show"</span></p>
	<br/>
	<hr/>
	<form class="form-horizontal" role="form" method="POST">
		<div class="form-group">
			<label class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input class="form-control" 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" id="email" type="text" placeholder="Your Email...">
				</div>
			</div>
			<fieldset >
				<div class="form-group">
					<label for="password" class="col-sm-2 control-label">Password</label>
					<div class="col-sm-10">
					<input class="form-control" 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>

insert.php

<?php
	//Create connection
	$connection = mysqli_connect('localhost','username','passwd','dbName');
	
	if($_REQUEST['name']){
	$name = $_REQUEST['name'];
	$email = $_REQUEST['email'];
	$password= $_REQUEST['password'];
	$gender = $_REQUEST['gender'];
	
	$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";
	
	$query = mysqli_query($connection,$q);
	if($query){
		echo ' Data Inserted Successfully'
        mysql_close($connection);
		}
	}
?>

JS / insert.js

$(document).ready(function(e) {
	$('#submit').click(function(){
		var name = $('#name').val();
		var email = $('#email').val();
		var password = $('#password').val();
		var gender = $('#gender').val();
		
		$ajax({
			type:'POST',
			data:{name:name,email:email,password:password,gender:gender},
			url:"insert.php", //php page URL where we post this data to save in databse
			success: function(result){
			
				$('#alert').show();
				
				$('#show').html(result);
						
				
			}
		})
	});
});

Answer 1

无论如何，这个特殊的代码可以允许插入到数据库中，尽管在某些地方仍然存在一些我无法找到的问题。

的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>

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');
          }
      }

?>

Answer 2

首先，您附加到ID为“submit”的元素的jQuery事件处理程序永远不会触发，因为它不会匹配html中的任何元素。将您的HTML更改为以下内容：

<button type="submit" name="submit" id="submit"> Submit! </button>

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

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

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

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

我假设您的VALUES中的空白字符串应该为插入的ID保留一个位置...如果您在数据库表中打开了自动递增，则不必包含空字符串。这只是解决问题的一个开始，但如果您包含有关您收到的错误的更多详细信息，我们可能会提供更多帮助。

使用Ajax和PHP

2 个答案: