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 本地主机：8080 /测试/ updatebasicdetails 此页面具有相同的HTML响应，我从ajax调用响应中收到的内容。我犯错的地方????

方法代码 -

@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）是返回字符串的私有方法。 data是jpa实体对象。 inside方法stringbuilder用于设置html字符串中的值，并返回一个带有新值的整个html字符串。

Answer 1

thnx是你的帮助。这是我的愚蠢错误，我错过了删除js方法在同一个链接上点击我提交表格。所以在执行给定的ajax调用后，它正在执行另一个块，因此提交了表单..这是一个愚蠢的错误。请原谅我！ thnx all。

Answer 2

试试这个

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

Answer 3

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

Answer 4

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

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

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

4 个答案: