Question

我在查看我需要的解决方案时遇到了问题。我正在工作的网站上有一个选择菜单，客户端希望能够选择一个名为“创建新原点”的选项，然后会弹出一个JS窗口，其中包含一个空白字段供用户使用输入新的来源。

提交此表单后，数据库将会更新，选择菜单现在将显示此项目，而不会对页面进行全面刷新。

数据库方面的所有内容都已准备就绪，99％的Coldfusion也是如此。

以下是相关表单字段的片段：

<p class="_30NP" align="right">
    <label>Origin&nbsp;</label>
</p>
<p class="_20NP">
    <cfselect 
     name="Origin" 
     id="Origin" 
     query="Origin" 
     display="description" 
     value="code"  
     required="yes">
        <option value="new">New Origin</option>
    </cfselect>
</p>

这是CFQUERY：

<CFQUERY DBTYPE="Query" NAME="Origin">
    SELECT Code, [Description]
    FROM ZCODES WHERE CODE = 0
    UNION ALL 
    SELECT Code, [Description]
    FROM ZCODES
    WHERE FieldName = 'Origin'
    ORDER BY 1
</CFQUERY>

这是一个非常简单的问题，可能是一个非常简单的答案，我只是很少接触AJAX。

如何在不完全刷新页面的情况下提交表单（弹出窗口）并刷新选择列表？

Answer 1

我会使用像jQuery这样的javascript库来处理你的ajax。

点击按钮后，使用$.get()，$.post()或$.ajax()与服务器进行通信。每个人都会提供回复。响应类型取决于您。您可以返回JSON并解析它，或者您可以返回直接的HTML。我可能只是简单地返回html来快速轻松。

<cfoutput query = "...">
    <option value = "...">...</option>
</cfoutput>

获得结果后，使用$.html()更新select's选项。

Answer 2

迈克尔，我个人不喜欢完全jQuery ajax解决方案。我真的很喜欢CFAJAXPROXY。我听说它有缺点，但我还没找到。

您的问题与stackexchange.com网站上的另一个问题非常相似。我想你可以在这里找到一些好消息。

https://softwareengineering.stackexchange.com/questions/133759/where-can-i-find-a-simple-jquery-ajax-coldfusion-tutorial

AJAX＆amp; Coldfusion：执行数据库更新并反映更改而无需重新加载

2 个答案: