如何使用jquery ajax提交表单，语法是什么？

Question

I am trying to submit a form without page reloading, but the function for ajax request that I used does not seem to work? 我正在尝试提交不重新加载页面的表单，但是我使用的Ajax请求功能似乎不起作用？ Is there a problem with my ajax request? 我的Ajax请求有问题吗？ Please help. 请帮忙。

Html Code HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Big Project</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>
    <header>

    </header>
    <div class="container" style="text-align:center;">
      <div class="maincontent">
          <form class="form" method="post">
              <div class="form-group">
                  First Name : <input type="text" name="firstname" value=""><br>
                  Last Name  : <input type="text" name="lastname" value=""><br>
                  Email : <input type="email" name="email" value=""><br>
                  <input type="submit" class="btn btn-success" name="submit" value="Submit">
              </div>
          </form>
      </div>
    </div>
  </body>
  <script>
    $(function () {
            $('form').bind('click', function (event) {

            event.preventDefault();// using this page stop being refreshing

              $.ajax({
                type: 'POST',
                url: 'homebackend.php',
                data: $('form').serialize(),
                success: function () {
                  alert('form was submitted');
                }
              });

            });
          });
  </script>
  <!-- Jquery script library -->
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</html>

homebackend.php homebackend.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "userdb";

$connect = mysqli_connect($servername, $username, $password, $dbname);

if(!$connect)
{
  echo "Connection failed" . mysqli_connect_error();
}
else {
  echo "Connection Successful";


  $fname = $_POST['firstname'];
  $lname = $_POST['lastname'];
  $email = $_POST['email'];

  $sql = "INSERT INTO users (first_name, last_name, email) VALUES ('$fname', '$lname', '$email')";

  if (mysqli_query($connect, $sql)) {
      echo "New record created successfully";
  } else {
      echo "Error: " . $sql . "<br>" . mysqli_error($connect);
  }

  mysqli_close($connect);
}
?>

AJAX [UPDATE] AJAX [更新]

  <script>


       $("form").submit( function(e) {
        e.preventDefault();
        $.ajax({
          type: 'POST',
          url: 'homebackend.php',
          data: $('form').serialize(),
          success: function () {
            alert('form was submitted');
          }
        });
});
  </script>

Answer 1

use this for submit a form: 使用它来提交表格：

$("form").submit( function(e) {
        e.preventDefault();
})

Answer 2

You can always do: 您可以随时这样做：

$("button").click(function(){
    $.post("homebackend.php", {$("form").serialize()}, function(data){
        console.log('submitted form');
    });
});

On a side note, please use prepared statements for your database queries. 另外，请对数据库查询使用准备好的语句。 You're very susceptible to SQL injection. 您非常容易受到SQL注入的影响。

如何使用jquery ajax提交表单，语法是什么？

问题描述

2 个解决方案

解决方案1
0 2017-03-10 16:43:24

解决方案2
0 2017-03-10 16:52:12

如何使用jquery ajax提交表单，语法是什么？

问题描述

2 个解决方案

解决方案1 0 2017-03-10 16:43:24

解决方案2 0 2017-03-10 16:52:12

解决方案1
0 2017-03-10 16:43:24

解决方案2
0 2017-03-10 16:52:12