将服务器端的HTML元素添加回客户端

时间:2017-08-22 04:13:33

标签: javascript java jquery html ajax

我正在尝试发帖到后端并从我的ajax帖子中获取元素。我的后端是Java,它将HTML字符串发送回客户端。我希望在用户按下post后,该字符串在某个标签后显示为HTML。

ajax邮政编码:

var saveSafetyData = new FormData();
saveSafetyData.append("statusNonUs", statusNonUs.value);
saveSafetyData.append("issuedBy", issuedBy.value);
var entryDate = document.getElementById("entryDate");
saveSafetyData.append("entryDate", entryDate.value);
var effectiveDateNonUs = document.getElementById("effectiveDateNonUs");
saveSafetyData.append("effectiveDateNonUs", effectiveDateNonUs.value);
var expirationDate = document.getElementById("expirationDate");
saveSafetyData.append("expirationDate", expirationDate.value);
saveSafetyData.append("action", "saveNonUsSafetyData");

$.ajax({
      type: "post",
      url: "carrierProfile",
      data: saveSafetyData,
      processData: false,
      contentType: false,
      success: function (responseData, textStatus, jqXHR) {
             modalSafety.style.display = "none";
             $("#nonUsSafetyForm").trigger("reset");                                
             $("#tabs-3").append("${createNonUsSafety}");
      },
      error: function (jqXHR, textStatus, errorThrown) {
             console.log(errorThrown);
      }
});

所有输入都是从模态中提取的,一旦用户点击保存,它就会发布到后端。到目前为止,我已尝试$(#tabs-30).append(htmlString),但我在该行上收到错误消息:

  

缺少)参数列表

之后

这是错误的位置和显示的内容

$("#tabs-3").append("<div id="nonUsSafetyTable" class="carrierViewItem">

我似乎无法弄清楚导致它停止解析字符串的原因。它在最后>

之后停止

回发到javascript的Java代码:

if ("saveNonUsSafetyData".equals(action)){
    String statusNonUs = request.getParameter("statusNonUs");
    String issuedBy = request.getParameter("issuedBy");
    session.setAttribute("statusNonUs", statusNonUs);
    String entryDate = request.getParameter("entryDate");
    String effectiveDateNonUs = request.getParameter("effectiveDateNonUs");
    String expirationDate = request.getParameter("expirationDate"); 
    String createNonUsSafety =          "<div id=\"nonUsSafetyTable\" class=\"carrierViewItem\">\n" +
        "                                   <div class=\"divTable\">\n" +
        "                                        <div class=\"divTableBody\">\n" +
        "                                            <div class=\"divTableRow\">\n" +
        "                                                <div class=\"divTableCell\">Status: " + statusNonUs + "</div>\n" +
        "                                                <div class=\"divTableCell\">Issued By: " + issuedBy + "</div>\n" +
        "                                                <div class=\"divTableCell\">Entry Date: " + entryDate + "</div>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"divTableRow\">\n" +
        "                                                <div class=\"divTableCell\">Effective Date: " + effectiveDateNonUs + "</div>\n" +
        "                                                <div class=\"divTableCell\">Expiration Date: "+ expirationDate + "</div>\n" +
        "                                                <div class=\"divTableCell\"></div>\n" +
        "                                            </div>\n" +
        "                                        </div>\n" +
        "                                    </div>\n" +
        "                                </div>\n";
    session.setAttribute("createNonUsSafety", createNonUsSafety);
}

我假设我的HTML字符串中的某些内容导致最终的paranthese无法显示,从而导致该错误。

3 个答案:

答案 0 :(得分:1)

尝试替换\&#34; (单引号中的反斜杠和双引号)(&#39;)。这应该有用。

"<div id='nonUsSafetyTable' class='carrierViewItem'>\n"

如果有效,请告诉我。

<强>建议: 我会说改进你的代码。在java端创建html并不是一个好主意,它总是容易出错并且难以调试。 相反,您应该在Java Bean对象中设置这些属性,然后在UI中将其渲染回来。

答案 1 :(得分:0)

我不明白为什么在生成HTML字符串时使用custom

不需要换行符来呈现HTML,只是为了让人们更具可读性。

尝试从服务器端代码中删除plugins { compile ("com.mypackage.domain:custom:1.0") } ,它可能会起作用

即。替换:

dependencies {
     compile ("com.mypackage.domain:custom:1.0:zip")
}

由此:

    //Sort and display list of Student objects by sortBy (surname or id)
public static void sortAndDisplayStudents(String sortBy, ArrayList<Object> objList) {
    ArrayList<Student> students = new ArrayList<>();

    //Add all Objcets in objList that are a Student
    for(Object s: objList) {
        if(s instanceof Student) {
            students.add(s);
        }
    }
}

答案 2 :(得分:0)

更改此声明

$("#tabs-3").append("${createNonUsSafety}");

$("#tabs-3").html("${createNonUsSafety}");