如何在沒有頁面刷新的情況下使用jQuery和Ajax在MySQL中插入數據

Question

我有一個index.php頁面，其中包含一個表單和一個輸入按鈕，並使用此腳本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    e.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>

形成

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

我想在單擊插入按鈕時將表單數據存儲到數據庫中而不刷新頁面。

Answer 1

使用表單提交事件來處理表單子目錄

$(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上發送ajax請求，而不是在提交表單時發送。

Answer 2

我在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;
    }        
}
?>

Answer 3

要處理表單提交，您可以使用$( "#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>

Answer 4

嗯，這里有很多遺漏的東西，但讓我告訴你一般做什么：

在你的index.php中：

1. 檢查是否收到POST請求，然后啟動數據庫保存功能。 我會使用doctrine或至少PDO來保存/更新數據。

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

2. 在前端，使用POST類型對該頁面執行AjAX。 您可以使用：

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

然后在Ajax調用中使用它：

type: 'POST', data:formData,

希望能幫助到你。

Answer 5

您可以使用答案中提到的jquery，但為什么要再次發明風團呢？ 有一個jQuery表單插件，用於處理提交表單。 你不必寫下那個漫長的JS代碼。 它簡單易用，並提供多種數據格式。 請在以下鏈接中查看：

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

希望能幫助你，讓你的工作變得輕松:)。

Answer 6

如果您使用此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（）函數

結果是：

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