Question

尝试使用Ajax和jQuery将我的注册页面发布到数据库，但是很难。

我对ajax和手杖很新，似乎让我知道如何做这个插入。非常感谢有关如何做到这一点的任何建议。我不确定我现在所拥有的东西是否能够远程关闭。

当我点击提交按钮时，页面刷新，但数据库没有变化。

* html代码

<html>
<head>
<title>Register</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/validation.js"></script>
<script type="text/javascript" src="../js/registerpost.js"></script>
</head>
<body>
<div id="container">
  <div id="mainContent")>
    <form class="basic-grey"  method="post">
      <h1>Registration Form<span>Please complete all fields.</span></h1>
      <p>
        <label><span>First Name:</span>
          <input name="firstname" id="firstname" type="text" size="40" maxlength="40" placeholder="First Name" required/>
        </label>
        <label><span>Surname:</span>
          <input name="lastname" id="lastname" type="text" size="40" maxlength="40" placeholder="Surname" required/>
        </label>
        <label><span>Username:</span>
          <input name="username" id="username" oninput="checkUsername();" type="text" size="40" maxlength="40" placeholder="Username" required/>
        </label>
        <label><span>Email:</span>
          <input name="email" id="email" oninput="checkEmail();" type="email" size="40" maxlength="40" placeholder="Email" required/>
        </label>
        <label><span>Password:</span>
          <input name="password1" id="password1" type="password" size="40" maxlength="40" placeholder="********" required/>
        </label>
        <label><span>Confirm Password:</span>
          <input name="password2" id="password2" oninput="checkPassword();" type="password" size="40" placeholder="********" required/>
        </label>
      </p>
      <div align="center"><span align = "center" id="user-result"></span><br><br><br>
      </div>
      <div align="center">
        <span>&nbsp;</span><input type="submit" class="button" id="submit_btn" value="Submit" />
      </div>
    </form>
    </form>
  </div>
</div>
</body>
</html>

php code

<?php

    include 'connection.php';

    $hash = password_hash($_POST['password2'], PASSWORD_DEFAULT, ['cost' => 11]);
    $sql = "INSERT INTO members(firstname, lastname, username, email, password )
                      VALUES(:firstname, :lastname, :username, :email, :password )";

    $stmt = $db->prepare($sql);
        $stmt->bindParam(':firstname', $_POST['firstname'], PDO::PARAM_STR);
        $stmt->bindParam(':lastname', $_POST['lastname'], PDO::PARAM_STR);
        $stmt->bindParam(':username', $_POST['username'], PDO::PARAM_STR);
        $stmt->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
        $stmt->bindParam(':password', $hash, PDO::PARAM_STR);

        $results->$stmt->execute();

        if($results) {
            echo 'Welcome new member, and thanks you for registering with the website.';
            echo '<br><br>Click <a href="../index.html">here</a> to return to the login page';
        } else {
            echo 'Did not work.';
        }
    ?>

js code

$(document).ready(function() {

    $('#submit_btn').click(function(){

            var data = {};
            data.firstname = $('#firstname').val();
            data.lastname = $('#lastname').val();
            data.username = $('#username').val();
            data.email = $('#email').val();
            data.password2 = $('#password2').val();


            $.ajax({
                type: "POST",
                url: "../php/newuser.php",
                data: data,
                cache: false,
                success: function (response) {

                }
            });
                return false;
        });

    });

非常感谢任何帮助。

谢谢

Answer 1

你可以这样做。详情请见： https://webdevideas.wordpress.com/2013/07/30/n-forms-one-javascript/

（文档）$。就绪（函数（）{

$（＆＃34; .ajaxform＆＃34）。绑定（＆＃34;提交＆＃34;，函数（E）{

e.preventDefault();

var ajaxurl = $(this).attr("action");

var data = $(this).serialize();

$.post(ajaxurl,data,function(res){

    $("#message").html(res.message);

},'json');

}）;

Answer 2

解决了这是我在PHP文件中犯的一个简单错误。

此

$results->$stmt->execute();

到此

$results = $stmt->execute();

全部谢谢

使用jQuery和Ajax提交表单

2 个答案: