Question

我正在尝试合并此代码以允许我在给出详细信息后注册用户，然后加载新页面，所有这些都是使用AJAX完成的。

第1步：用户寄存器在register.php中的表单中输入其详细信息。使用带有ID＆＃34; reg-submit＆＃34;的输入提交后，详细信息将传递给click.js。

第2步：如果用户成功，信息将在click.js中处理，并通过ajax准备传递给usersubmit.php以进行数据库插入。

第3步：数据已成功插入数据库，next-page.php加载到＆＃34; #main-content＆＃34; div（位于index.php中）。

帮助保持上下文。所有页面都加载在index.php中的#main-content div中。它们都是通过在ajax成功时在click.js部分中看到的相同函数加载的。 Register.php只是在这个div中加载的页面之一。

我需要进行注册，然后在适当插入所有后端数据库信息的同时加载下一页。

register.php

<script src="js/click.js"></script>

<form action="click.js" method="post">

   <label for="first_name">First Name:</label>
   <input type="text" id="first_name" name="first_name" /><br>

   <label for="last_name" >Last Name:</label>
   <input type="text" id="last_name" name="last_name" /><br>

   <label for="username">Username:</label>
   <input type="text" id="username" name="username" /><br>

   <label for="password">Password:</label>
   <input type="text" id="password" name="password" /><br>

   <label for="email">Email:</label>
   <input type="email" id="email" name="email" /><br>

   <button type="submit" id="reg-submit" name="submit">Submit</button><br>

</form>

click.js

$(document).ready(function(){

  $('#reg-submit').click(function() {
     var firstName = $('#first_name').val();
     var lastName = $('#last_name').val();
     var userName = $('#username').val();
     var password = $('#password').val();
     var email = $('#email').val();
     var dataString = 'name1=' + firstName + '&lastname1=' + lastName + '&user1=' + userName + '&password1=' + password + '&email1=' + email;

     if (firstName == "" || lastName == "" || userName == "" || password == "" || email == "") {
         alert('missing some information');
     }  else {
         $.ajax({
           type: "POST",
           url: "usersubmit.php",
           data: dataString,
           cache: false,
           success: function(){
             $('#main-content').load('php/next-page.php').hide().fadeIn('slow');                
          }
        });
      };
   return false;
   });
});

数据库连接发生在users_db.php。

中

usersubmit.php

<?php 

   include 'users_db.php';

   $first1=$_POST['name1'];
   $last1=$_POST['lastname1'];
   $username1=$_POST['user1'];
   $pass1=$_POST['password1'];
   $email01=$_POST['email1']; 

   $userinfo = $conn->prepare("INSERT INTO registered_users (FirstName, LastName, Username, Password, Email) VALUES ('$first1', '$last1', '$username1'', '$pass1', '$email01')");

   $userinfo->execute();


   $conn = null;
?>

非常感谢！

如果您发现我可能在表单之外没有提交任何其他问题，请随时指出。

Answer 1

更改

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

到

<button type="button" id="reg-submit" name="submit">Submit</button>

为了避免表单提交，将触发te ajax调用。

Answer 2

在js函数的末尾添加return false;以防止表单提交并允许实际进行ajax调用。

无法获得AJAX注册表单提交

2 个答案: