我决定尝试学习JQuery,并开始在这个请求页面中实现一些AJAX功能.它在FireFox,IE和Safari中运行良好,但由于一些奇怪的原因,我无法在Chrome中使用它.
我现在已经调试了几个小时,我不知道为什么它不起作用.这是HTML表单的相关部分(由于JavaScript而删除了帖子操作)：
<form method="POST">
<input type="text" name="amount" value="0" size="7" />
<input type="submit" value="Fulfill!" /><br />
<input type="hidden" name="index" value="69" />
<input type="hidden" name="item" value="Iron Ore" />
</form>
这是它发布的PHP表单：
<?PHP require_once("../classes/Database.PHP"); $database = new Database(); $amount = $database->sanitizeString($_POST['amount']); $index = $database->sanitizeString($_POST['index']); $username = $database->sanitizeString($_POST['username']); $item = $database->sanitizeString($_POST['item']); $database->connect(); $database->setRequest($amount,$index,$username,$item); $database->setKarma($username,$amount,$item); ?>
最重要的是,这是我的新手JavaScript代码,它只是在HTML文件中：
<script language="JavaScript">
var amount = 0;
var index = 0;
var item = 0;
var username = "";
var data = "";
$(document).ready(function(){
$("form input[type=submit]").click(function(){
amount = $(this).siblings("input[name=amount]").val();
index = $(this).siblings("input[name=index]").val();
item = $(this).siblings("input[name=item]").val();
username = "<?=$_SESSION['username']; ?>";
//var stuff = $.post("pages/ajaxfulfill.PHP",{amount:amount,index:index,item:item,username:username},function(data){alert(data)},"html");
var stuff = $.ajax(
{
url: "pages/ajaxfulfill.PHP",type: "POST",data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,success: function(data)
{
alert("Success")
},error: function (XMLHttpRequest,textStatus,errorThrown)
{
alert("error" + XMLHttpRequest.status);
alert("error" + XMLHttpRequest.responseText);
}
}
)
$(this).parents("td").text("Submitted");
});
});
</script>
起初,我使用了注释掉的$.post函数,该函数适用于上述浏览器.我试图在调试过程中切换到$.ajax函数,并发现FF,IE和Safari总是返回“成功”警报,而Chrome返回状态为0且空白响应的错误.
作为一个JavaScript新手,我完全迷失了为什么会失败.如果有人能指出我正确的方向,你会得到我深深的敬意和祝福.谢谢.
解决方法
(这里的跨浏览器可能会有所不同,在函数结束时通过调用text()函数从页面中删除表单.是否应该停止提交表单？不知道……某些浏览器可能,但没有说明这么说.)
使用event.preventDefault();在传递给处理函数(event){…}的参数上停止按钮点击进行提交表单.
但是不要将表单提交代码绑定到输入按钮.您的脚本可能(取决于浏览器和表单的其他属性)无法触发其他类型的提交,例如Enter press.始终使用表单上的submit事件绑定验证和AJAX表单替换. event.preventDefault();仍然适用.
省略< form>的action属性是无效的;浏览器通常会选择要提交的现有页面的URL.如果您想要没有表单的表单字段提交(并且您不需要无线电输入),只需省略< form>元件.但实际上你应该使用渐进增强：首先使用普通的HTML,使用正确的方法=“POST”action =“ajaxfulfill.PHP”使表单工作,然后在其上构建一个简单的AJAX函数.
username = "<?=$_SESSION['username']; ?>";
脚本注入.代替：
username= <?= json_encode($_SESSION['username'],JSON_HEX_TAG); ?>
和：
data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,
您需要对URL-encoded-form-submission中的每个值使用encodeURIComponent(…),否则特殊字符会破坏它.最好让jQuery为您做到这一点：
data: {amount: amount,index: index,item: item,username: username},
甚至更简单,删除field.val()的所有手动读取,只需使用现有的serialize功能为您完成所有操作：
data: $(this).serialize(),
(假设现在这是你正在处理提交的形式……如果它是提交按钮,你必须说$(this.form).)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
