所以我创建了一个包含多个表单的html站点,使用jQuery对话框UI进行显示,使用jQuery表单插件进行ajax提交。
表格如下:
<form id="login_form" action="admin.php" method="post">
Username: <input type="text" name="username" id="username"/><br/>
Password: <input type="password" name="password" id="password"/>
</form>
...表单选项如下所示:
$('#login_form').dialog({
buttons:{
"Login": function(){
var options = {
success: function(data){
alert(data);
$(this).dialog("close");
$('#news_form').dialog("open");
},
timeout: 3000,
fail: function(data){
alert('fail');
},
clearForm: true
};
// bind form using 'ajaxForm'
$('#news_form').ajaxSubmit(options);
},
"Exit": function(){
$(this).dialog("close");
}
}
});
...而且php文件很简单:
<?php
$data = 'Herro!';
echo $data;
?>
问题是,在成功时,表单返回作为提交源的html页面,而不是'Herro!'像我预料的那样。我做错了什么?
admin.html和admin.php文件都在同一个目录中。
此外,网络是通过xampp在本地运行的,但我也尝试将其放在网络服务器上,但没有任何改进。
FINAL EDIT:问题实际上是因为我在DOM中调用了一个不同的表单对象来提交数据,这是一个没有设置action属性的表单。感谢大家的快速解决方案。
答案 0 :(得分:2)
将$('#news_form').ajaxSubmit(options);
更改为$('#login_form').ajaxSubmit(options);
答案 1 :(得分:1)
尝试将结果包装在JSON对象中(在php文件中),在java脚本端,您现在可以使用任何标准的json javascript库解码此JSON对象(您可以在此处下载一个:http://www.JSON.org/json2.js)。
然后是下面的代码
admin.php的:
<?php
$data = json_encode('Herro!');
echo $data;
?>
然后在你的html(javascript)中你可以进行这个小调整:
<script>
var result; //adjustment 1
$('#login_form').dialog({
buttons:{
"Login": function(){
var options = {
success: function(data){
result = JSON.parse(data); //adjustment 2
alert(result); //adjustment 3
$(this).dialog("close");
$('#news_form').dialog("open");
},
timeout: 3000,
fail: function(data){
alert('fail');
},
clearForm: true
};
// bind form using 'ajaxForm'
$('#news_form').ajaxSubmit(options);
},
"Exit": function(){
$(this).dialog("close");
}
}
});
</script>
记得引用您在页面中下载的json2.js文件。如果这有助于你,请告诉我。