Jquery 在成功更新数据而不刷新页面后，如何刷新html表单

我有一个html表单，它使用Jquery/Ajax方法更新表单数据。成功更新后，将显示“成功消息”。那很好，但这只是形式上的内容。我想在更新完成后重新加载/刷新表单/表单内容，无需页面刷新。我该怎么做？你们能给出一个解决方案或想法吗？多谢各位

我的jquery代码如下所示

如果您需要我的html表单，我会将其上载到此处。：）

$（'body'）。在（'click'，'upload'，函数（e）{
e、 预防默认值（）；
var formData=new formData（$（this）.parents（'form'）[0]）；
$.ajax({
url:'editContactDetails.php'，
键入：“POST”，
xhr:function（）{
var myXhr=$.ajaxSettings.xhr（）；
返回myXhr；
},
成功：函数（数据）{
$（“#success”）.html（数据）；
//警报（响应）；
},
数据：formData，
cache:false，
contentType:false，
processData:false
});
返回false；
})

更新：

<div id="showContactsDetails">
<h2>Individual Record Details</h2>

<div style=" visibility:hidden;" id="visiable">

<span class="mandatory"><sub>* Required</sub></span>
        <!--success update -->  
        <div id="success"></div>

<form action="" method="post" enctype="multipart/form-data" id="all_contact_details">
<table width="450" border="0" cellspacing="0" cellpadding="0">  
  <input type="hidden" name="cdid" id="cdid"/>
  </tr>     
  <tr>
    <td>Company Name</td>
    <td><input type="text" name="company_name" id="company_name" disabled="disabled"/></td>
  </tr>
  <tr>
    <td>Family name</td>
    <td><input type="text" name="family_name" id="family_name"/></td>
  </tr>
  <tr>
    <td>Given name</td>
    <td><input type="text" name="given_name" id="given_name"/></td>
  </tr>
  <tr>
    <td>Work Phone</td>
    <td><input type="text" name="work_phone" id="work_phone"/></td>
  </tr>
  <tr>
    <td>Mobile Phone</td>
    <td><input type="text" name="mobile_phone" id="mobile_phone"/></td>
  </tr>
  <tr>
    <td>Email address</td>
    <td><input type="text" name="email" id="email"/></td>
  </tr>
  <tr>
    <td>Private email address</td>
    <td><input type="text" name="email_private" id="email_private"/></td>
  </tr>
  <tr>
    <td>Upload your document</td>
    <td><input type="text" name="file_des_1" id="file_des1" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input name="file1" type="file" id="file" class="file"/></td>
  </tr>

  <tr>
    <td></td>
    <td><input type="text" name="file_des_2" id="file_des2" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file" name="file2" id="file_2" class="file"/></td>
  </tr>

  <tr>
    <td></td>
    <td><input type="text" name="file_des_3" id="file_des3" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file"  name="file3" id="file_3" class="file"/></td>
  </tr>

  <tr>
    <td></td>
    <td><input type="text" name="file_des_4" id="file_des4" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file"  name="file4" id="file_4" class="file"/></td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td><input type="button" name="submit" value="Update Details" class="submit" id="upload"/></td>
  </tr>  
</table>
</form> 
</div>


</div>

个人纪录详情
*必需的
公司名称
姓
姓名
工作电话
手机
电子邮件地址
私人电子邮件地址
上传你的文件
*
*
*
*

只需在成功功能中重置：

$("#success").html(data);
$this.closest('form').get(0).reset();

---

您可以这样做：

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var $this = $(this); // cache the current context of selector
    var formData = new FormData($this.closest('form')[0]); // update this

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
           $("#success").html(data);
           $this.closest('form').get(0).reset();
           // or if above not work then try this
           //$this.closest('form').find(':input:not(#upload)').val('');
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

---

只需在成功功能中重置：

$("#success").html(data);
$this.closest('form').get(0).reset();

---

您可以这样做：

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var $this = $(this); // cache the current context of selector
    var formData = new FormData($this.closest('form')[0]); // update this

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
           $("#success").html(data);
           $this.closest('form').get(0).reset();
           // or if above not work then try this
           //$this.closest('form').find(':input:not(#upload)').val('');
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

检查这个

纯javascript:

document.getElementById("all_contact_details").reset();

$("#all_contact_details")[0].reset();

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();
            //$("#all_contact_details")[0].reset();
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

jquery:

document.getElementById("all_contact_details").reset();

$("#all_contact_details")[0].reset();

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();
            //$("#all_contact_details")[0].reset();
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

完整代码：

document.getElementById("all_contact_details").reset();

$("#all_contact_details")[0].reset();

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();
            //$("#all_contact_details")[0].reset();
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

检查这个

纯javascript:

document.getElementById("all_contact_details").reset();

$("#all_contact_details")[0].reset();

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();
            //$("#all_contact_details")[0].reset();
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

jquery:

document.getElementById("all_contact_details").reset();

$("#all_contact_details")[0].reset();

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();
            //$("#all_contact_details")[0].reset();
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

完整代码：

document.getElementById("all_contact_details").reset();

$("#all_contact_details")[0].reset();

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();
            //$("#all_contact_details")[0].reset();
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

---

---

对表单调用

reset（）

对表单调用

reset（）

似乎不起作用。我在这个页面上有两个thml表单标签。这就是问题所在吗？@Babu你能发布你的html结构吗？当然我现在发布了。你提到了两个表单，这只是一个，我想它在另一个div包装器中，并且没有相同的id。可以使用，但因为我们已经在当前上下文中工作，所以我认为这没有什么区别，因为op正在使用

success

callback not

。done（）

。它似乎不起作用。我在这个页面上有两个thml表单标签。这就是问题所在吗？@Babu你能发布你的html结构吗？当然我现在发布了。你提到了两个表单，这只是一个，我想这是在另一个div包装器中，并且没有相同的id。可以使用yeah，但因为我们已经在当前上下文中工作，所以我认为这没有什么区别，因为op正在使用

成功

回调而不是

。done（）

。您好，您知道为什么在使用您的代码后它现在不工作吗？

上下文：这

您是否在代码中添加了它，以及控制台中的错误是什么？控制台日志中的错误：

类型错误：$（…）。验证不是一个函数$（“#所有联系信息”）。验证({

@Babu然后，当页面刷新时，您必须在服务器端执行此操作，您可以回显表单数据和您发布的文件。好的，谢谢。收到了您的巨大帮助。：）您好，您知道为什么在使用您的代码后它现在不起作用吗？

context:this

您是否在代码中添加了此项以及consoleError中的错误是什么控制台日志中的错误：

TypeError:$（…）。validate不是函数$（“#所有联系信息”）。validate({

@Babu然后，当页面刷新时，您必须在服务器端执行此操作，您可以回显表单数据和您发布的文件。好的，谢谢。收到了您的巨大帮助。：）