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) 是私有方法，returns 一个字符串。 data 是 jpa 实体对象。在方法 stringbuilder 中设置 html 字符串中的值和 returns 具有新值的整个 html 字符串。

Answer 1

试试这个

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

Answer 2

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

Answer 3

谢谢你的帮助。这是我的愚蠢错误，我错过了删除 js 方法在同一个 link 单击我正在提交表单的地方。所以在执行给定的 ajax 调用后，它正在执行另一个块并因此提交了表单..多么愚蠢的错误。请原谅我！谢谢大家。

Answer 4

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

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

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

ajax call response is forwarded to new html page on browser

javascript

ajax

jquery

call