首页 新闻 会员 周边 捐助

ajaxForm提交页面会跳转

0
悬赏园豆：15 [已解决问题] 解决于 2013-12-16 22:43
 
 

 

<script src="JQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="JQuery/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

        $('#perForm').ajaxForm(function(data){

            alert(data);//弹出ajax请求后的回调结果，data回调数据

        });

});
</script>

<form id="perForm" method="post" action="Ajax/Quser_lwh.ashx">
                <table class="w_pTab" style="width: 90%;">
                    <tr>
                        <th class="w_pTh">
                            <label>用户名：</label>
                        </th>
                        <td >
                            <input type="text" class="myinput" style="margin-left:15px;" id="usename" name="usename"/>
                            <span class="tips" style="display: none;line-height: 37px;">已存在</span>
                        </td>
                    </tr>
                    <tr>
                        <th class="w_pTh">
                            <label>联系电话：</label>
                        </th>
                        <td>
                            <input type="text" class="myinput" style="margin-left:15px;" id="usephone" name="usephone"/>
                            <span class="tips" style="display: none;line-height: 37px;">仅可使用数字</span>
                        </td>
                    </tr>
                    <tr>
                        <th class="w_pTh">
                            <label>地址：</label>
                        </th>
                        <td>
                            <input type="text" class="myinput" style="margin-left:15px;" id="useadr" name="useadr"/>
                            <span class="tips" style="display: none;line-height: 37px;">超出长度</span>
                        </td>
                    </tr>
                    <tr>
                        <th class="w_pTh">
                            <label>电子邮箱：</label>
                        </th>
                        <td>
                            <input type="text" class="myinput" style="margin-left:15px;" id="usemail" name="usemail"/>
                            <span class="tips" style="display: none;line-height: 37px;">格式不正确</span>
                        </td>
                    </tr>
                    <tr style="height:8px">
                        <th></th>
                        <td><input id="useid" name="useid" type="hidden" value="1"/></td>
                    </tr>
                    <tr>
                        <th class="w_pTh"> 
                        </th>
                        <td>
                            <input type="submit" value="提交" name="subper" id="subper" class="mybut"  style="margin-left:26px;"/>
                                    
                            <input type="button" value="重置" name="clear" id="clear" class="mybut" style="margin-left:40px;" />
                        </td>
                    </tr>
                </table>
                </form>

为什么执行可以成功，最后页面还是跳转了？跳转到一个只有true字的页面

雾里小梅花的主页 雾里小梅花 | 初学一级 | 园豆：137
提问于：2013-12-11 14:43
< >
分享
最佳答案
0

input标签的type为submit，肯定会刷新了。

收获园豆：8
水晶途途 | 小虾三级 |园豆：1443 | 2013-12-11 15:11

这位仁兄好眼力

木乌 | 园豆：1015 (小虾三级) | 2013-12-11 15:13

那换成什么呢

雾里小梅花 | 园豆：137 (初学一级) | 2013-12-11 15:53

@雾里小梅花: 你是想用ajaxForm来提交嘛，那这里就不需要submit啊，type='button'就可以了。

水晶途途 | 园豆：1443 (小虾三级) | 2013-12-11 17:05

@轻风拂夏: 按照你的经验那页面还会跳转吗？

雾里小梅花 | 园豆：137 (初学一级) | 2013-12-11 21:33

@雾里小梅花: 不跳转也可以，需要把submit事件拦截。这样写：

1 $(document).ready(function(){
2             $('#perForm').ajaxForm(function(data){
3                 alert(data);//弹出ajax请求后的回调结果，data回调数据
4             }).submit(function(){return false;});
5         });
水晶途途 | 园豆：1443 (小虾三级) | 2013-12-12 10:28

@轻风拂夏: button会触发你写的代码的那个事件？也就是触发表单提交，还是再要$('#btnid').click(.....)，好吧，我再继续学习，谢谢了

雾里小梅花 | 园豆：137 (初学一级) | 2013-12-12 12:56

@雾里小梅花: 

 1 <script src="JQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
 2 <script src="JQuery/jquery.form.js" type="text/javascript"></script>
 3 <script type="text/javascript">
 4 $(document).ready(function(){
 5     $('#perForm').ajaxForm(function(data){
 6         alert(data);//弹出ajax请求后的回调结果，data回调数据
 7     }).submit(function(){return false;});
 8 });
 9 </script>
10 
11 <form id="perForm" method="post" action="Ajax/Quser_lwh.ashx">
12     <table class="w_pTab" style="width: 90%;">
13         <tr>
14             <th class="w_pTh">
15                 <label>用户名：</label>
16             </th>
17             <td >
18                 <input type="text" class="myinput" style="margin-left:15px;" id="usename" name="usename"/>
19                 <span class="tips" style="display: none;line-height: 37px;">已存在</span>
20             </td>
21         </tr>
22         <tr>
23             <th class="w_pTh">
24                 <label>联系电话：</label>
25             </th>
26             <td>
27                 <input type="text" class="myinput" style="margin-left:15px;" id="usephone" name="usephone"/>
28                 <span class="tips" style="display: none;line-height: 37px;">仅可使用数字</span>
29             </td>
30         </tr>
31         <tr>
32             <th class="w_pTh">
33                 <label>地址：</label>
34             </th>
35             <td>
36                 <input type="text" class="myinput" style="margin-left:15px;" id="useadr" name="useadr"/>
37                 <span class="tips" style="display: none;line-height: 37px;">超出长度</span>
38             </td>
39         </tr>
40         <tr>
41             <th class="w_pTh">
42                 <label>电子邮箱：</label>
43             </th>
44             <td>
45                 <input type="text" class="myinput" style="margin-left:15px;" id="usemail" name="usemail"/>
46                 <span class="tips" style="display: none;line-height: 37px;">格式不正确</span>
47             </td>
48         </tr>
49         <tr style="height:8px">
50             <th></th>
51             <td><input id="useid" name="useid" type="hidden" value="1"/></td>
52         </tr>
53         <tr>
54             <th class="w_pTh"> 
55             </th>
56             <td>
57                 <input type="submit" value="提交" name="subper" id="subper" class="mybut"  style="margin-left:26px;"/>
58                         
59                 <input type="button" value="重置" name="clear" id="clear" class="mybut" style="margin-left:40px;" />
60             </td>
61         </tr>
62     </table>
63 </form>
View Code
水晶途途 | 园豆：1443 (小虾三级) | 2013-12-12 14:41
其他回答(2)
0

action="Ajax/Quser_lwh.ashx"，应该是跳转到这个页面了吧

收获园豆：7
木乌 | 园豆：1015 (小虾三级) | 2013-12-11 14:54

为什么没有实现局部刷新？我使用了jquery

支持(0) 反对(0) 雾里小梅花 | 园豆：137 (初学一级) | 2013-12-11 14:59

@雾里小梅花: 给你一个完整的

method="post" action="Ajax/Quser_lwh.ashx" 去掉

$("#subper").click(function() {

$.ajax({
async: true,
cache: false,
global: true,
timeout: 120000,
contentType: 'application/x-www-form-urlencoded',
type: "POST",
url: "Ajax/Quser_lwh.ashx",
dataType: 'text',
data: { Tid: tid, Num: num, Stime: stime, Etime: etime },//参数参考这个格式自己写
beforeSend: function () {
//beforeSend
},
success: function (msg) {
alert(msg);

},
error: function () {
alert("没有查询到信息！");
},
});

}

支持(1) 反对(0) 木乌 | 园豆：1015 (小虾三级) | 2013-12-11 15:07

@巴拉扒拉: 懂了，那这个ajaxForm方法是不能实现局部刷新的了

支持(0) 反对(0) 雾里小梅花 | 园豆：137 (初学一级) | 2013-12-11 15:20

@巴拉扒拉: 用了你这个完整版的，表单<form>都要去掉。。哦。。。。

支持(0) 反对(0) 雾里小梅花 | 园豆：137 (初学一级) | 2013-12-11 15:22
0

楼上两位说的都很对，按他们说的都能找到问题

junjieok | 园豆：779 (小虾三级) | 2013-12-11 15:18
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。