Jquery表单数据不通过ajax POST方法发送

Jquery form data not sending through ajax POST method

本文关键字：POST 方法 ajax 表单 数据 Jquery      更新时间：2023-09-26

我有一个表单，通过ajax发送数据到php，非常简单。但是当我提交表单时，数据并没有被发送出去。

Javascript: 

$(document).ready(function(e) {
    $('#update').submit(function(event) {
        event.preventDefault();
        var fd = new FormData($('#update')[0]);
        alert(fd);
        $.ajax({
            url:'func/update.php?id=<?php echo md5($result['id']);?>',
            processData: false,
            contentType: false,
            data: fd,
            type:'POST',
            dataType:"JSON",
            success:function(json){
            }
        });
    });
});
PHP: 

if(empty($_POST)){
    echo 'No post data';
}else{
    echo 'data sent';
}
print_r($_POST);

php是非常基本的，可以看到发生了什么。我通常会从单个字段附加我的数据。

数据:{a, b: b, c: c}…等等。

HTML: 

<form id="updateStaff">
Profile Picture<br /><img id="pp_img_display" src="../images/<?php echo $result['pp'];?>" width="100px" /><br /><small>Upload a new image</small><br/><input onchange="uploadImage()" type="file" id="file" /><input type="hidden" id="pp_img" value="<?php echo $result['pp']; ?>" /><br/><small>upload .jpg .png .jpeg only</small><br /><div class="form_err" id="image_err"></div>
Name: <select id="prefix" required="required">
<option><?php echo $result['prefix']; ?></option>
<?php $pre = array('Mr','Mrs','Miss','Ms');
for($x = 0; $x < count($pre); $x++){
    if($pre[$x] != $result['prefix']){
        echo '<option>'.$pre[$x].'</option>';
    }
}?>
</select>&nbsp;
<input type="text" id="f_name" placeholder="First Name" value="<?php echo $result['f_name'];?>" required="required" />&nbsp;
<input type="text" id="l_name" placeholder="Last Name" value="<?php echo $result['l_name'];?>" required="required" /><br/>
Job Title: <input type="text" id="job" required="required" placeholder="Job Tilte" value="<?php echo $result['job_title']; ?>" />
<br/>
Years of Experience: <input type="number" id="xp" required="required" placeholder="1" value="<?php echo (int)$result['xp'];?>" />
<p><input type="submit" value="Update" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Cancel" onclick="history.go(-1);"/></p>
</form>

我本以为formData会是这样做的一个更短的方式

要发送，元素需要name属性:

<input name="myInputSend" type="text" id="f_name" placeholder="First Name" value="<?php echo $result['f_name'];?>" required="required" />

一旦您在项目中添加了类似于第一个答案的内容以将名称前缀应用于您的部分视图，您就可以原样发布它们。

边注

如果你在这些局部视图中使用可变长度列表，那就不那么容易了。

  1. 你想要发送prefix给控制器，以正确地添加新的htmlNamePrefixes到新的部分视图。
  2. 为了使在这些情况下发布更容易，我创建了这个助手$.fn()

辅助函数将re-base丢失/添加的名称索引按顺序返回parenting form中的每个partial视图(即使是部分视图，也有部分视图)，以便按原样返回。

相关文章：