将Ajax与JSF命令按钮或表单结合使用
Using Ajax with JSF command button or form
我甚至可能没有正确解决这个问题,但这是发生的事情。我有一些RESTful Web服务要调用。调用它们的代码是用JavaScript编写的。它被称为:
<h:body onload="smaInit();">
<h:form onsubmit="smaSignUp();">
每当页面加载时,我都会进行2次Ajax调用。这些调用成功。每当提交表单时,我想再进行两次Ajax调用。但是,这些调用失败了。我没有看到任何来自Firebug的错误,所以我不知道发生了什么。
为了详细说明我说它们失败的意思,在Netbeans中,我为Rest调用设置了断点。当onload事件被触发时,我碰到了断点。但是,当onsubmit事件被触发时,我不会碰到断点。
我现在唯一的理论是Ajax调用不适用于页面提交。这是正确的吗?页面更改是否会导致Ajax调用在完成之前被终止?
无论如何,任何见解都是好的。以下是正在调用的JavaScript:
函数getUrlVars(){var vars={};var parts=window.location.href.replace(/[?&]+([^=&]]+)=([^&**)/gi,函数(m,键,值){vars[key]=值;});返回vars;}
function post(req, json, url)
{
req.open("POST", url, true);
req.setRequestHeader("Content-Type",
"application/json");
req.send(json);
}
function createRequest() {
var result = null;
if (window.XMLHttpRequest) {
// FireFox, Safari, etc.
result = new XMLHttpRequest();
if (typeof result.overrideMimeType !== 'undefined') {
result.overrideMimeType('text/xml'); // Or anything else
}
}
else if (window.ActiveXObject) {
// MSIE
result = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
// No known mechanism -- consider aborting the application
}
return result;
}
function createClientRecord(ip)
{
//get users id from url
var id = getUrlVars()["said"];
//get time
var timeStamp = new Date().getTime();
var url = [location.protocol, '//', location.host, location.pathname].join('');
var map = {"userId": id, "ip": ip, "timeStamp": timeStamp, "url": url};
return JSON.stringify(map);
}
function signUp(clientInfo)
{
var req = createRequest(); // defined above
// Create the callback:
req.onreadystatechange = function() {
if (req.readyState !== 4)
return; // Not there yet
if (req.status !== 200) {
// Handle request failure here...
return;
}
// Request successful, read the response
var resp = req.responseText;
// ... and use it as needed by your app.
};
var url = '/ui/webresources/signup';
post(req, clientInfo, url);
}
function mark(clientInfo)
{
var req = createRequest(); // defined above
// Create the callback:
req.onreadystatechange = function() {
if (req.readyState !== 4)
return; // Not there yet
if (req.status !== 200) {
// Handle request failure here...
return;
}
// Request successful, read the response
var resp = req.responseText;
// ... and use it as needed by your app.
};
var url = '/ui/webresources/mark';
post(req, clientInfo, url);
}
function smaInitGetIp()
{
var req = createRequest(); // defined above
// Create the callback:
req.onreadystatechange = function() {
if (req.readyState !== 4) {
return; // Not there yet
}
if (req.status !== 200) {
// Handle request failure here...
return;
}
// Request successful, read the response
var resp = req.responseText;
// ... and use it as needed by your app.
var clientInfo = createClientRecord(resp);
mark(clientInfo);
};
var url = '/ui/webresources/ip';
req.open("GET", url, true);
req.send();
}
function smaSignUpGetIp()
{
var req = createRequest(); // defined above
// Create the callback:
req.onreadystatechange = function() {
if (req.readyState !== 4) {
return; // Not there yet
}
if (req.status !== 200) {
// Handle request failure here...
return;
}
// Request successful, read the response
var resp = req.responseText;
// ... and use it as needed by your app.
var clientInfo = createClientRecord(resp);
signUp(clientInfo);
};
var url = '/ui/webresources/ip';
req.open("GET", url, true);
req.send();
}
function smaInit()
{
var temp = getUrlVars()["said"];
if (temp === null || temp === 'undefined')
{
//a social advertiser did not send them here
return;
}
smaInitGetIp();
}
function smaSignUp()
{
//get the id, if id isnt present, send null
var temp = getUrlVars()["said"];
if (temp === null || temp === 'undefined')
{
temp = null;
}
smaSignUpGetIp();
}
您需要停止要在onsubmit
方法中使用return false;
触发的默认事件(在本例中为提交事件)。
这样可以防止发生同步回发。
function smaSignUp() {
//get the id, if id isnt present, send null
var temp = getUrlVars()["said"];
if (temp === null || temp === 'undefined')
{
temp = null;
}
smaSignUpGetIp();
//to prevent the default event to be fired
return false;
}
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 将图像上传ajax与表单提交ajax相结合
- 将按钮组与表单结合起来-Bootstrap 3
- 将普通表单与文件输入与拖放区相结合
- Ajax 将关联数组与表单序列化相结合
- 结合两个javascript函数来验证表单并通过ajax提交
- 将锚标记与表单的操作属性结合使用
- 将Ajax与JSF命令按钮或表单结合使用
- HTML5表单验证与javascript篮子验证相结合
- Bootstrap Modals,在表单验证中结合Jquery和JS代码
- 表单与jquery结合PHP发送结果*更新完整的代码*
- 我试图验证一个表单与多个函数,但它只调用最后一个,即使我将它们与逗号结合
- 结合jQuery的preventDefault和必需的表单输入
- 结合表单提交的jquery和输入的插件
- 结合模式弹出和HTML5表单验证
- 对空输入不做任何事情-在表单上结合动态操作
- 结合两个javascript函数来计算表单
- 结合jQueryValidate和ajax表单提交
- 将语义 UI 与 asp.net Web 表单结合使用
- 将 jquery-ui 自动完成与动态表单生成结合使用