ajax将表单数据传递给另一个php页面

时间:2016-04-29 00:13:39

标签: javascript php jquery ajax

大家好我需要帮助我在一个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>

的Ajax

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 );
    });
}

单击保存但屏幕刷新但不使用在表单上编辑的信息更新数据库。请帮忙谢谢。

2 个答案:

答案 0 :(得分:0)

你在关闭表格吗?您尚未显示</form>标记。另外 - 为什么不简单地序列化表单以获取所有值 - 而不是使用js来获取每个值,但不要忘记给每个输入命名。

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

然后在AJAX中;

data: formData;

也适用于您的标签 - 您应该将它们与输入的ID相关联(对于屏幕阅读器和辅助功能:

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

答案 1 :(得分:0)

添加event.preventDefault();在你的功能结束时