【请各位指点】如元素在form内,利用ajax无法提交数据给服务器。
- HTML code
<!DOCTYPE html><html lang ="en"> <head> <title>AJAX</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <!--@jQuery--> <script type="text/javascript" src="assets/jQuery/jQuery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button#jqb1").click(function(){ var un = $("input#username").val(); alert(un);//至此都能正常工作 $.post("AJAX", {username:un}, function(result){//I can't make $.get() work...and $.post() can't work, too... $("p#jqp1").html(result); }); }); </script> </head> <body> <form>//去掉form即可正常工作 <input type = "text" id = "username"/> <button id="jqb1" class="btn">check username</button> <br/> <p id = "jqp1"></p> </form> </body></html>
小生发现在加入form标签后,在$.get()之前都正常,但无论是GET或POST都无法将数据提交给服务器(通过HTTP监视器发现),而且肯定不是调用jQuery的问题,因为小生用传统Ajax写法写了一遍也是一样,没form正常工作,加入form后无法提交数据。。。
请各位指点,多谢!
[解决办法]
你用的是什么浏览器?IE核心的应该没问题,但是firefox或者chrome就要注意了,button标签等效于type=submit的input,你的问题应该是表单提交。参考:button,input type=button按钮在IE和w3c,firefox浏览器区别
而且你贴的代码结构有问题吧。。少了})了。
- JScript code
$(document).ready(function(){ $("button#jqb1").click(function(){ var un = $("input#username").val(); alert(un);//至此都能正常工作 $.post("AJAX", {username:un}, function(result){//I can't make $.get() work...and $.post() can't work, too... $("p#jqp1").html(result); }); }); return false;//阻止非IE浏览器表单提交 });