Fatal编程技术网
  • jquery/
  • Jquery 将所有表单作用域异步发送到CFC

Jquery 将所有表单作用域异步发送到CFC

jquery ajax asynchronous coldfusion

Jquery 将所有表单作用域异步发送到CFC,jquery,ajax,asynchronous,coldfusion,cfc,Jquery,Ajax,Asynchronous,Coldfusion,Cfc,目前正在努力解决ColdFusion中的异步提交问题。我在这方面总是有困难。我有一个表格，我想提交给远程CFC，并得到某种回复。（最终这个表单将有一个类似草稿的功能…）我知道如何设置每个部分：表单和CFC。我的问题是连接他们！！！关于这一点，也有类似的帖子，但没有一篇提供足够的信息……至少对我来说是这样 表格： ........ CFC方法（这只是一个测试）： 注：我的CFC功能设置为远程等 我这里有我的表格，它应该发布到cfc，但是它实际上会进入cfc页面。我不要这个。我对尝试将aja

目前正在努力解决ColdFusion中的异步提交问题。我在这方面总是有困难。我有一个表格，我想提交给远程CFC，并得到某种回复。（最终这个表单将有一个类似草稿的功能…）我知道如何设置每个部分：表单和CFC。我的问题是连接他们！！！关于这一点，也有类似的帖子，但没有一篇提供足够的信息……至少对我来说是这样

表格：


........
CFC方法（这只是一个测试）：
注：我的CFC功能设置为远程等

我这里有我的表格，它应该发布到cfc，但是它实际上会进入cfc页面。我不要这个。我对尝试将ajax与ColdFusion结合使用感到非常沮丧。我准备使用jQuery来提交它。我可以用jQuery来完成……但是我不知道如何将字段放入结构中。（这个表单将会很大…）我想看看如何在ColdFusion或jQuery中以结构形式发送表单信息。我希望能够保留表单字段名称

即使有人能给我指出正确的方向…那也太好了。一段时间以来，我一直试图找到一个关于这方面的好教程，但也没有找到。

我想你要找的是标签和类似的东西：

<cfajaxproxy bind="cfc:mycfc.myfunction(arg1={myform:myfield1},arg2={myform:myfield2})" />
实际上，您没有像以前那样在url中指定操作，而是通过ajax代理调用它

我认为这是您正在尝试的，可能是错误的，让我知道：）

我认为您正在寻找的是标签和类似的东西：

<cfajaxproxy bind="cfc:mycfc.myfunction(arg1={myform:myfield1},arg2={myform:myfield2})" />
实际上，您没有像以前那样在url中指定操作，而是通过ajax代理调用它

我认为这是您正在尝试的，可能是错误的，让我知道：）

如果您想将表单控件作为结构传递，我将首先尝试将表单元素序列化为json字符串，然后将该字符串传递给您的Web服务。然后，您可以从Web服务使用反序列化JSON（）将其转换回结构。下面是一些代码，可以帮助您接近这一点：

<script>
/* function prototype code modified from here: http://api.jquery.com/serializeArray/#comment-130159436 */
(function( $ ){
$.fn.serializeJSON=function() {
var json = [];
jQuery.map($(this).serializeArray(), function(n, i){
json.push('"' + escape(n['name']) + '":"' + escape(n['value']) + '"');
});
return '{' + json.join(',') + '}';
};
})( jQuery );

// make the request to your webservice
$.post('myComponent.cfc?method=updateRequest', { formJSON: $("#requestForm").serializeJSON()}, function () { /* handle response here. */ })
</script>


/*从此处修改的函数原型代码：http://api.jquery.com/serializeArray/#comment-130159436 */
（函数（$）{
$.fn.serializeJSON=函数（）{
var json=[]；
jQuery.map（$（this）.serializeArray（），函数（n，i）{
json.push（““'+escape（n['name']）+”：“'+escape（n['value']）+”）；
});
返回'{'+json.join（'，'）+'}'；
};
})（jQuery）；
//向您的Web服务发出请求
$.post（'myComponent.cfc？method=updateRequest'，{formJSON:$（“#requestForm”）.serializeJSON（）}，函数（）{/*在此处处理响应。*/}）
然后在CFC中，将参数更改为：

<cffunction name="updateRequest" access="remote" returntype="numeric">
    <cfargument name="formJSON" type="string" required="yes">
    <cfset var formStruct = DeserializeJSON(arguments.formJSON)>
    <cfset var status = 0>

     <cfreturn status>
</cffunction>
如果希望将表单控件作为结构传递，我将首先尝试将表单元素序列化为json字符串，然后将该字符串传递给您的Web服务。然后，您可以从Web服务使用反序列化JSON（）将其转换回结构。下面是一些代码，可以帮助您接近这一点：

<script>
/* function prototype code modified from here: http://api.jquery.com/serializeArray/#comment-130159436 */
(function( $ ){
$.fn.serializeJSON=function() {
var json = [];
jQuery.map($(this).serializeArray(), function(n, i){
json.push('"' + escape(n['name']) + '":"' + escape(n['value']) + '"');
});
return '{' + json.join(',') + '}';
};
})( jQuery );

// make the request to your webservice
$.post('myComponent.cfc?method=updateRequest', { formJSON: $("#requestForm").serializeJSON()}, function () { /* handle response here. */ })
</script>


/*从此处修改的函数原型代码：http://api.jquery.com/serializeArray/#comment-130159436 */
（函数（$）{
$.fn.serializeJSON=函数（）{
var json=[]；
jQuery.map（$（this）.serializeArray（），函数（n，i）{
json.push（““'+escape（n['name']）+”：“'+escape（n['value']）+”）；
});
返回'{'+json.join（'，'）+'}'；
};
})（jQuery）；
//向您的Web服务发出请求
$.post（'myComponent.cfc？method=updateRequest'，{formJSON:$（“#requestForm”）.serializeJSON（）}，函数（）{/*在此处处理响应。*/}）
然后在CFC中，将参数更改为：

<cffunction name="updateRequest" access="remote" returntype="numeric">
    <cfargument name="formJSON" type="string" required="yes">
    <cfset var formStruct = DeserializeJSON(arguments.formJSON)>
    <cfset var status = 0>

     <cfreturn status>
</cffunction>
使用
ColdFusion.Ajax.submitForm
函数

<html> 
<head> 
<!--- The cfajaximport tag is required for the submitForm function to work 
            because the page does not have any Ajax-based tags. ---> 
<cfajaximport> 

<script> 
    function submitForm() { 
        ColdFusion.Ajax.submitForm('myform', 'asyncFormHandler.cfm', callback, 
            errorHandler); 
    } 

    function callback(text) 
    { 
        alert("Callback: " + text); 
    } 

    function errorHandler(code, msg) 
    { 
        alert("Error!!! " + code + ": " + msg); 
    } 
</script> 

</head> 
<body> 

<cfform name="myform"> 
    <cfinput name="mytext1"><br /> 
    <cfinput name="mytext2"> 
</cfform> 

<a href="javascript:submitForm()">Submit form</a> 


函数submitForm（）{
ColdFusion.Ajax.submitForm（'myform'，'asyncFormHandler.cfm'，回调，
错误处理程序）；
} 
函数回调（文本）
{ 
警报（“回调：+文本）；
} 
函数errorHandler（代码，msg）
{ 
警报（“错误！！！”+code+：“+msg”）；
}
使用
ColdFusion.Ajax.submitForm
函数

<html> 
<head> 
<!--- The cfajaximport tag is required for the submitForm function to work 
            because the page does not have any Ajax-based tags. ---> 
<cfajaximport> 

<script> 
    function submitForm() { 
        ColdFusion.Ajax.submitForm('myform', 'asyncFormHandler.cfm', callback, 
            errorHandler); 
    } 

    function callback(text) 
    { 
        alert("Callback: " + text); 
    } 

    function errorHandler(code, msg) 
    { 
        alert("Error!!! " + code + ": " + msg); 
    } 
</script> 

</head> 
<body> 

<cfform name="myform"> 
    <cfinput name="mytext1"><br /> 
    <cfinput name="mytext2"> 
</cfform> 

<a href="javascript:submitForm()">Submit form</a> 


函数submitForm（）{
ColdFusion.Ajax.submitForm（'myform'，'asyncFormHandler.cfm'，回调，
错误处理程序）；
} 
函数回调（文本）
{ 
警报（“回调：+文本）；
} 
函数errorHandler（代码，msg）
{ 
警报（“错误！！！”+code+：“+msg”）；
}

如果您想包含文件字段及其内容，我认为您在上传所有内容时可能会遇到问题。浏览器中的安全性不允许您读取文件（您需要这样做才能通过ajax请求上传文件内容）。如前所述，使用serialize将获得表单的其他内容，您可以在服务器上解码这些内容。 如果您确实需要文件的内容，您可能需要考虑将表单提交到隐藏的iFrame，该iFrame不会导致页面重新加载，但应该发送文件：

<form action="saveCode.cfc?method=safeDraft" method="post" enctype="multipart/form-data" target="upframe">
Say Something: <input type="text" name="foo"><br>
Add a File: <input type="file" name="myfile"><br>
<input type="submit">


说点什么：

添加文件：

我还强烈建议使用Fiddler（）来观察上传的内容，并确保正确解码上传的内容

编辑：堆栈溢出在上面的示例中隐藏了我的iframe标记。我还在Mac上的Chrome和FireFox中测试了这个示例，它似乎工作正常。

我认为如果你想包含文件字段及其内容，上传所有内容时可能会遇到问题。浏览器中的安全性不允许您读取文件（您需要这样做才能通过ajax请求上传文件内容）。如前所述，使用serialize将获得表单的其他内容，您可以在服务器上解码这些内容。 如果你是真的