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>元素。

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

使用.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);

希望这有帮助！

通过ajax传递表的一部分

1 个答案: