如何使用jQuery和Ajax在MySQL中插入数据而不进行页面重构

使用表单提交事件处理表单提交

$(document).ready(function() {
    $("#reg-form").submit(e) { //submit event occur when you submit your form
        e.preventDefault(); //this will prevent reloading and default form submission 
        var name = $("#first_name").val();
        var last_name = $("#last_name").val();
        var city_name = $("#city_name").val();
        var dataString = 'first_name=' + name + '&last_name=' + last_name + '&city_name=' + city_name;
        $.ajax({
            data: dataString,
            url: 'index.php',
            success: function(data) {
                alert(data);
            }
        });
    }
});

您正在document.ready而不是when-form上发送ajax请求提交。

am在index.php 中使用此插入查询

<?php
include_once 'dbconfig.php';
if(isset($_POST['Update'])){
    $fname = $_POST['first_name'];  
    $lname = $_POST['last_name'];
    $cityname = $_POST['city_name'];
    $query1 = mysql_query("INSERT INTO users (first_name,last_name,user_city) VALUES('$fname','$lname','$cityname')");
    if(is_scalar($query1)){
        echo "Insert Sucssesfulyy";die;
    }        
}
?>

要处理表单提交，可以使用$( "#reg-form" ).submit(function(event)

为防止加载，请使用event.preventDefault();

结果是

<script type="text/javascript">
    $(document).ready(function() {
        $( "#reg-form" ).submit(function(event){
            event.preventDefault();
            var name = $("#first_name").val();
            var last_name = $("#last_name").val();
            var city_name = $("#city_name").val();
            var dataString = 'first_name=' + name + '&last_name=' + last_name + '&city_name=' + city_name;
            $.ajax({
                data: dataString,
                url: 'index.php',
                success: function(data) {
                    alert(data);
                }
            });
        });
    });
</script>

好吧，这里有很多遗漏的东西，但让我告诉你一般应该做什么：

在您的index.php:中

1. 检查是否收到POST请求，然后初始化DB保存功能。我会使用条令或至少PDO来保存/更新数据。

   if($_POST['Update'] == 'SAVE'){ // Do DB work}

2. 在前端，使用POST类型对该页面执行AjAX操作。你可以使用：

   var formData = jQuery('#reg-form').serialize();

然后在Ajax调用中使用它：

type: 'POST', data:formData,

希望能有所帮助。

您可以使用答案中提到的jquery，但为什么要再次发明wheal？有一个jQuery表单插件可以处理提交的表单。你不必写下那么长的JS代码。它简单易用，并提供多种数据格式。请在以下链接查看：

http://malsup.com/jquery/form/

希望这能帮助你，让你的工作变得轻松：）。

如果您使用这个PHP代码

<?php
include_once 'dbconfig.php';
if(isset($_POST['Update'])){
    $fname = $_POST['first_name'];  
    $lname = $_POST['last_name'];
    $cityname = $_POST['city_name'];
    $query1 = mysql_query("INSERT INTO users (first_name,last_name,user_city) VALUES('$fname','$lname','$cityname')");
    if(is_scalar($query1)){
        echo "Insert Sucssesfully";
    }
    else{
        echo "Insert aborted";
    }
}
?>

这个标记

<form method="post" id="reg-form">
    <table align="center">
        <tr>
            <td align="center"><a href="index.php">back to main page</a></td>
        </tr>
        <tr>
            <td><input type="text" name="first_name" id="first_name" placeholder="First Name" required /></td>
        </tr>
        <tr>
            <td><input type="text" name="last_name" id="last_name" placeholder="Last Name" required /></td>
        </tr>
        <tr>
            <td><input type="text" name="city_name" id="city_name" placeholder="City" required /></td>
        </tr>
        <tr>
            <td><input type="submit" name="Update" id="update1" value="SAVE" /></td>
        </tr>
    </table>
</form>
<div id="result">
</div>

然后发送数据的最佳方式（根据我的说法）是使用Jquery.load（）函数

srpt结果为：

<script type="text/javascript">
    $(document).ready(function() {
        $( "#reg-form" ).submit(function(event){
            event.preventDefault();
            var name = $("#first_name").val();
            var last_name = $("#last_name").val();
            var city_name = $("#city_name").val();
            $( "#result" ).load(
                     //The URL of the action page
                    "index.php",
                     //Datas to sent as an Array [name:value]
                    {Update:true,first_name:name,last_name:last_name,city_name:city_name},
                     //OnComplete function
                    function() {
                        alert( "Datas sent" );
                    }
                );
        });
    });
</script>