通过ajax传递表格的一部分

Question

我正在使用 ajax 调用查询，但我试图返回一个表。我已经能够获得硬编码版本以将文本返回到文本框中，但我试图将其作为表格返回。对此的任何帮助将不胜感激。

AJAX 调用

$.ajax({
    url: "proxy/TomorrowsDate.cfm",
    type: "post",
    dataType: "json",
    data: {date: Tmrwdate },
    success: function (data) {
        console.log(data);
        console.log( $('#DueTmrw'));
        $('#DueTmrw').val(data.TEXT);
    },
    error: function (xhr, textStatus, errorThrown) {
        console.log(errorThrown);
    }

代理/TomorrowsDate.cfm

<cfset result = {} /> 
<cftry> 
    <cfset session.dealerwork.tomorrowsdate = form.date > 
    <cfset result.date = form.date/> 

    <cfquery name="tomorrowTextArea"> 
        SELECT dbo.Dealer_Track_Work.id, dbo.Dealer_Track_Work.dealerID, dbo.Dealer_Track_Work.Date_Received, dbo.Dealer_Track_Work.op_id, dbo.Dealer_Track_Work.Date_Due, 
        dbo.Dealer_Track_Work.Date_Complete, dbo.Dealer_Track_Work.Completed_Late, dbo.Dealer_Track_Work.Closed_by, dbo.Dealer_Track_Work.Rmks, dbo.Dealer_Track_Work.Processing_Location, 
        dbo.Dealer_Track_Work.Item_Count, dbo.Dealer_Track_Dealers.id, dbo.Dealer_Track_Dealers.Name
        FROM dbo.Dealer_Track_Work, dbo.Dealer_Track_Dealers
        WHERE dbo.Dealer_Track_Work.dealerID = dbo.Dealer_Track_Dealers.id  
        AND Date_Complete IS NULL
        AND Date_Due = <cfqueryparam value="#session.dealerwork.tomorrowsdate#" /> 
        AND Date_Complete IS NULL
    </cfquery> 

    <cfset result.text = ''>
    <cfoutput query="tomorrowTextArea">
        <cfset result.text = result.text & "<tr>
                                 <td>#id#</td>
                                 <td>#tomorrowTextArea.name#</td>
                                 <td>#Item_Count# ITEMS</td>
                              </tr>" />
    </cfoutput>



    <cfcatch type="any"> 
        <cfset result.error = CFCATCH.message > 
        <cfset result.detail = CFCATCH.detail > 
    </cfcatch> 
</cftry> 

<cfoutput>#SerializeJSON(result)#</cfoutput>

这就是我尝试在页面上显示信息的方式：<span id="DueTmrw" name="DueTmrw"></span>（这不显示任何内容）如果我使用<textarea type="text" name="DueTmrw" id="DueTmrw" class="form-control" rows="7"></textarea>，它会显示正确的结果，但就像 html 文本而不是实际表格一样。如何将这些行显示为通过 ajax 的表格？

我尝试过的所有事情：

<tbody>


     <span id="DueTmrw" name="DueTmrw"></span>
                           <textarea type="text" name="DueTmrw" id="DueTmrw" class="form-control" rows="7"></textarea>
                              <!---<cfoutput query="tomorrowTextArea">
                              <tr>
                                 <td>#id#</td>
                                 <td>#tomorrowTextArea.name#</td>
                                 <td>#Item_Count# ITEMS</td>
                              </tr>
                              </cfoutput>--->
                           </tbody>

还尝试做这样的事情：$("DueTmrw > tbody").append('<tr><td>my data</td><td>more data</td></tr>');

Answer 1

jQuery 的.val() 专门用于获取/设置表单组件的输入类型的值，例如<input> 和<textarea> 元素。

这就是为什么您的成功回调可以正常使用.val() 更新<textarea> 值但在尝试更新跨度标记时中断：

使用.val() 更新表单输入类型：

// this will work to change the value of an input field 
// (like a textarea) but will not update a <span> element.
$('#DueTmrw').val(data.TEXT);

更新非表单输入类型的文本（如span、div、a 等）。使用.text():

使用.text() 更新非表单字段类型：

// this will work to change the text of a non-form input field 
// (like a span) but will not update an <input> or form input element.
$('#DueTmrw').text(data.TEXT);

如果你想在一个元素中设置 HTML，比如你从服务器抓取的 HTML，那么使用.html():

如果您想更新（替换）页面上元素的 innerHTML，请使用 .html()：

var htmlFromServer = '<tr><td>example</td></tr>';
var myElement = $('.someTag');
myElement.html(htmlFromServer);

希望这会有所帮助！