我正在开发ColdFusion 8培训应用程序,其中正在提出一些AJAX请求(没有jQuery之类的任何库)以支持非常基本的CRUD应用程序.
高级体系结构包括CFM视图,具有接收AJAX请求的远程访问方法的CFC,以及充当模型并具有所有数据库查询的CFC.
对于仅检索不需要任何绑定变量(例如从表中获取所有行)的数据,AJAX查询工作正常.但是,当我尝试将任何内容发布到CFC中间层时,我在Form范围(根据我的理解是将存储发布参数的位置)中寻找的未定义值中遇到错误.我什至使用Tamper Data剖析了请求,并验证了post参数的名称和值是否符合我的期望.
这是JS AJAX请求的示例：
function addLocation(locToAdd) {
var thisAccess = new Accessstruct("POST", "jsontest.cfc?method=addNewLocation", getLocations, "newLoc=" + JSON.stringify(locToAdd));
accessWrapper("addLoc", thisAccess);
function accessWrapper(action, accessDef) {
var ajaxRequest = new XMLHttpRequest();
var nextStep;
if (action != "getLocs") {
nextStep = getLocations;
} else {
nextStep = buildTable;
}
ajaxRequest.onreadystatechange = function() { // using a closure so that the callback can
if (ajaxRequest.readyState == 4) { // examine the request and nextStep
if (ajaxRequest.status == 200) {
if (nextStep != null) {
nextStep(ajaxRequest);
}
return true;
} else {
alert("Request Could Not Be Completed; Errors On Page");
return false;
}
}
}
ajaxRequest.open(accessDef.method, accessDef.url, true);
ajaxRequest.send("newLoc=" + accessDef.params);
}
function Loc(locCode, parLocCode, name, addrL1, addrL2,
city, stateProv, postal, locTypeCode) {
this.locCode = locCode;
this.parLocCode = parLocCode;
this.name = name;
this.addrL1 = addrL1;
this.addrL2 = addrL2;
this.city = city;
this.stateProv = stateProv;
this.postal = postal;
this.locTypeCode = locTypeCode;
}
function Accessstruct(method, url, nextStep, params) {
this.method = method;
this.url = url;
this.nextStep = nextStep;
this.params = params;
}
本质上,页面上发生的事情是为“用户”呈现了由所有位置(loc)记录填充的表.有一个添加新用户的表单,当他们单击添加按钮时,将创建一个Loc结构,其中包含他们输入的信息并将其传递给addLocation函数.这将创建一个Access结构,其中将包括请求URL,方法,用作回调的函数的名称以及任何post参数.所有这些都传递给accessWrapper函数,该函数将创建XMLHttpRequest并处理AJAX请求.我为onreadystatechange回调函数使用了一个闭包,以便它可以知道XMLHttpRequest对象和Access结构中定义的回调函数(此回调函数通常用于在添加,删除记录后刷新视图表,或编辑).
这是报告问题的中间层CFC中的cffunction.我不会费心发布DAO CFC,因为它已经在其他地方进行了测试,甚至在此过程中都没有达到(因为它在中级[或控制器]级别上失败了)
<cffunction name="addNewLocation" output="false" access="remote">
<cfset var deserializedLocation = "">
<cfscript>
deserializedLocation = DeserializeJSON(Form.newLoc);
</cfscript>
<cfobject component="locationDAO" name="locationDAOObj">
<cfinvoke
component="#locationDAOObj#"
method="addLocation">
<cfinvokeargument name="code" value="#deserializedLocation.locCode#">
<cfinvokeargument name="parentCode" value="#deserializedLocation.parLocCode#">
<cfinvokeargument name="name" value="#deserializedLocation.name#">
<cfinvokeargument name="addr1" value="#deserializedLocation.addrL1#">
<cfinvokeargument name="addr2" value="#deserializedLocation.addrL2#">
<cfinvokeargument name="city" value="#deserializedLocation.city#">
<cfinvokeargument name="stateProv" value="#deserializedLocation.stateProv#">
<cfinvokeargument name="postal" value="#deserializedLocation.postal#">
<cfinvokeargument name="locationType" value="#deserializedLocation.locTypeCode#">
</cfinvoke>
</cffunction>
请求响应中的错误是：
500元素NEWLOC在FORM中未定义
就像我之前说过的那样,我已经在篡改数据中检查了该请求,在那里看起来还不错.在此先感谢您伟大的人们可能提供的任何帮助！
解决方法:
当您向CFC进行Ajax发布时,绝对有一个FORM范围.
本示例通过Ajax将表单数据POST到不带参数的CFC函数中,并返回FORM范围的JSON格式.是的,您应该有用于文档的参数,指定必需/不需要和数据类型,但是它们不是强制性的.
您是否没有使用jQuery的任何原因？这可能会使您的生活更加轻松.
将表单数据发送到Ajax调用的方式一定存在问题.如果使用FireBug观看Ajax呼叫,则可以看到POSTed参数.
HTML
<html>
<head>
<title>Ajax POST to CFC</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="test.js">
</head>
<body>
<form id="foo" action="" method="post">
<input type="text" id="a" name="a" value="Hello" />
<br />
<input type="text" id="b" name="b" value="Goodbye" />
<br />
<textarea id="data" cols="30" rows="10" disabled="true"></textarea>
<br />
<input type="button" id="btnSubmit" value="Do Ajax!" />
</form>
</body>
</html>JavaScript的
$(document).ready(function() {
$('#btnSubmit').on('click', function() {
$.ajax({
asynch : true,
type : 'POST',
dataType : 'json',
url : 'test.cfc?method=testing&returnformat=json',
data : {
a : $('#a').val(),
b : $('#b').val()
},
success : function(data, textStatus) {
$('#data').val(JSON.stringify(data));
}
});
});
});
CFC
<cfcomponent>
<cffunction name="testing" access="remote" output="false" returntype="string">
<cfreturn serializeJSON( form ) />
</cffunction>>
</cfcomponent>
老派,没有jQuery,只是普通的JavaScript
我在这里找到了一个没有jQuery的Ajax POST的简单示例：
http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
HTML
删除jQuery SCRIPT标记,将另一个SCRIPT更改为test-nojq.js,并更改Submit按钮以添加onclick事件.
<input type="button" id="btnSubmit" value="Do Ajax!" onclick="doSubmit();" />
JavaScript：test-nojq.js
function doSubmit(){
var http = new XMLHttpRequest();
var url = "test.cfc";
var params = "method=testing&returnformat=json";
params += "&a=" + document.getElementById('a').value;
params += "&b=" + document.getElementById('b').value;
http.open("POST", url, true);
//Send the proper header @R_155_4045@ion along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
document.getElementById('data').value = http.responseText;
}
}
http.send(params);
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
