ajax 將表單數據傳遞給另一個 php 頁面

Question

嗨，伙計們，我需要幫助，我在一個 php 頁面上有一個表單，想使用 ajax 傳遞到另一個 php 頁面，該頁面將更新我的數據庫，然后返回結果。

   <form name="profile" class="profile">
        <table>
            <tbody>
                <tr>
                    <td><lable>First Name: </lable><input type="text" class="input1" id="fname" name="fname" value="<?php echo $fname[0]; ?>" /></td>
                    <td><lable>Last Name: </lable><input type="text" class="input1" id="lname" name="lname"  value="<?php echo $fname[1]; ?>" /></td>
                </tr>
                <tr>
                    <td><lable>Email: </lable><input type="text" class="input1" id="email" name="email"  value="<?php echo $fname[2]; ?>" /></td>
                    <td><lable>Phone: </lable><input type="text" class="input1" id="phone" name="phone"  value="<?php echo $fname[3]; ?>" /></td>
                </tr>
                <tr>
                    <td><lable>Address 1: </lable><input type="text" class="input1" id="add1" name="add1"  value="<?php echo $fname[4]; ?>" /></td>
                    <td><lable>Address 2: </lable><input type="text" class="input1" id="add2" name="add2"  value="<?php echo $fname[5]; ?>" /></td>
                </tr>
                <tr>
                    <td><lable>City: </lable><input type="text" class="input1" id="city" name="city"  value="<?php echo $fname[6]; ?>" /></td>
                    <td><lable>State: </lable><input type="text" class="input1" id="state" name="state"  value="<?php echo $fname[7]; ?>" /></td>
                    <td>zip: </lable><input type="text" class="input1" id="zip" name="zip"  value="<?php echo $fname[8]; ?>" /></td>    
                </tr>
                <tr>
                    <td><lable>Occupation: </lable><input type="text" class="input1" id="job" name="job"  value="<?php echo $fname[9]; ?>" /></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Save" onclick="profileSave();" /></td>
               </tr>
           </tbody>
       </table>

阿賈克斯

function profileSave() {
    var fname = $('#fname').val();      var phone = $('#phone').val();      var city = $('#city').val();
    var lname = $('#lname').val();      var add1 = $('#add1').val();        var state = $('#state').val;
    var email = $('#email').val();      var add2 = $('#add2').val();        var zip = $('zip').val;

    var request = $.ajax({
        url: "save_profile.php",
        type: "post",           
        data: {fname: fname, lname: lname, email: email, phone: phone, add1: add1, add2: add2, city: city, state: state, zip: zip}
    });

    request.done(function(msg) {
        $("#profile").html(msg);            
    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });
}

當您單擊保存但屏幕刷新但不會使用在表單上編輯的信息更新數據庫時。 請幫忙謝謝。

Answer 1

你要關閉表格嗎？ 您還沒有顯示</form>標簽。 另外 - 為什么不簡單地序列化表單以獲取所有值 - 而不是使用 js 來獲取每個值，但不要忘記給每個輸入一個名稱。

var formData = $('[name=profile]').serialize();

然后在 AJAX 中；

data: formData;

也適用於您的標簽 - 您應該將它們與輸入的 id 聯系起來（對於屏幕閱讀器和可訪問性：

<label for="fname">First Name: </label>
<input type="text" class="input1" id="fname"....

Answer 2

添加 event.preventDefault(); 在你的函數結束時