jquery下的提交，点击按钮没反应，post方法不执行 JSON方式在FORM表单下不起作用

最新推荐文章于 2020-07-20 17:15:04 发布

原创最新推荐文章于 2020-07-20 17:15:04 发布 · 1.2w 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

错误 Bug

3 篇文章

订阅专栏

本文介绍了两种使用JQuery进行表单提交的方法，并指出在不使用<form>标签时的方法可以避免某些错误的发生。文章通过具体示例展示了如何通过按钮点击触发POST请求，并处理服务器返回的数据。

使用Jquery 提交时：

(1)

<button id="login">登陆</button>

$().ready(function(){
  $("#login")
  	.button()
  	.click(function(){
        	//alert("username"+$("#userName").val());
  		$.post(
  	        	"checkLogin.action",
  			{"username":$("#username").val(),"password":$("#password").val()},
  			function(data) {
  				//alert(data.suc)
  				if(data.suc) {
  				        window.location.href="userList.action";
  			        } else {
  					$("#error_message").html("* The username or password is incorrect.");
  				}
  			},
  			"json");		
  	});
 });

(2)

<input type="image" src="images/btn_login.png" onclick="javascript:submitForm()" id="btn_log" width="67" height="22"/>

function submitForm(){
  if($("#userName").val()=="")
  	$("#error_message").html("* User Name can not be null.");
  else if($("#userPassword").val()=="")
  	$("#error_message").html("* Password can not be null."); 			
  else {
  	$.post(
  	        "checkLogin.action",
  		{"username":$("#username").val(),"password":$("#password").val()},
  		function(data) {
  		        if(data.suc) {
  			        location.href="userList.action";
  		        } else {
  				$("#error_message").html("* The username or password is incorrect.");			
  			}
  		},
  		"json");
 }	
}

上面两种方法，在html中form表单不允许出现

<form method=""  action="" ////>
    ///////
</form>

否则出现错误(点击没反应，js函数里面的JSON方式 post方法没执行)。

去掉，<form></form>即可