ajax 调用响应被转发到浏览器上的新 html 页面

Question

我正在尝试编写一个 ajax 调用来响应我正在传回一个 html 字符串 我将此 html 字符串设置为 div 内容。它正在工作，但一旦 div 更新，请求就会被转发到新页面。我想不通。

这里是html代码-

<div id="basicdetailsdiv" class="row"><br>
            &lt;form:form id="basicdetailsform" method="post" modelAttribute="basicdetailform" action="updatebasicdetails"><br>
          &lt;div class="col-sm-6"><br>
            ..... ...... .....<br>
            ...... ..... .... <br>
         &lt;div id="editbasicsavediv" class="col-xs-5 control-label"> &lt;a id="editbasicsavelink" class="btn vd_btn btn-xs vd_bg-yellow"> &lt;i class="fa fa-pencil append-icon">&lt;/i> Save &lt;/a> &lt;/div>

        &lt;/form:form> 
        <div>

.js 代码

jQuery("#editbasicsavelink").click(function () {
        jQuery.ajax({
          type: "POST",
          url: "updatebasicdetails.xml",
          dataType: "html",
          data: $("#basicdetailsform").serialize(),
              success: function (response) {
              alert(response);
              alert(response.responseHtml);
              alert(response.responseText);
            $("#basicdetailsdiv").html(response);
            //element.innerHTML = resp.responseText
            alert("Details saved successfully!!!");
//          XMLHttpRequest.abort();
      },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
          }
        });
    });

所以一旦页面更新了响应，然后请求转发到一个新的 url localhost:8080/test/updatebasicdetails 此页面具有与我从 ajax 调用响应中收到的相同的 html 响应。 我在哪里犯错？？？？

方法代码-

@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public String processForm(@Valid com.mrg.form.BasicDetailsForm bdForm, Model model, HttpServletRequest request
        ) {
    System.out.println("basic details save start");
    // service call here to read entity object from db which is data
    model.addAttribute("basicdetailform", bdForm);
    return getBasicDataResponse(data);
}

getBasicDataResponse(data) 是返回字符串的私有方法。数据是 jpa 实体对象。在方法 stringbuilder 中设置 html 字符串中的值并返回具有新值的整个 html 字符串。

Answer 1

我猜你的回调没有绑定到 html 元素。确保在 document 完全加载后绑定它。将id=editbasicsavelink 添加到您的按钮并确保调用event.preventDefault()，因为它会停止默认操作。

jQuery(document)
     .ready(function() {    
        jQuery("#editbasicsavelink")
             .on('click',function(event) {
                jQuery.ajax({
                   //ajax code
                });
      });

Answer 2

感谢您的帮助。 这是我的愚蠢错误，我错过了删除 js 方法 在同一链接上单击我正在提交表单。 所以在执行给定的ajax调用之后，它正在执行另一个块，因此提交了表单……真是个愚蠢的错误。请原谅我！谢谢大家。

Answer 3

检查按钮的类型（ id = "editbasicsavelink" ）。如果类型为“提交”，则将其更改为按钮。 （要么） 添加“返回false；”在回调函数中防止表单提交。

Answer 4

试试这个

jQuery("#editbasicsavelink").click(function (e) {
        e.preventDefault();//this will stop page from refreshing  
        jQuery.ajax({
          //ajax code
        )}
    });