1. 程式人生 > >JQuery post json 資料提交心得

JQuery post json 資料提交心得

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! -->
    <meta name="description" content="">
    <meta name="author" content="">
  

    <title>Signin Template for Bootstrap</title>
<script src="js/jquery-3.2.1.js"></script>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/signin.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
  </head>
 
<script>
$(document).ready(function(){
  $("button").click(function(){
  alert(JSON.stringify(GetJsonData()))
   $.ajax({   
   contentType: 'application/json',
  type: 'POST',
  url: "http://192.168.0.1:8082/api/User/UserToken",
   dataType: "json",
  data: JSON.stringify(GetJsonData()),
   success: function (message) {
  if(message.err.code)
           alert(message.err.code);
			if(message.err.code)){
			alert(message.err.code);
			}
        
        },
        error: function (message) {
           console.log(message);
			alert("提交資料失敗!888"+message);
			
        }
});
 
});
function GetJsonData() {
    var json = {	
    "username":$("#inputUsername").val(), 
    "password":$("#inputPassword").val()
    };
    return json;
}
   
});
</script>
  <body>

</head>
<body>


    <div class="container">

      <form class="form-signin" >
        <h2 class="form-signin-heading">Please sign in</h2>
       
        <input type="email" id="inputUsername" class="form-control" placeholder="username" required autofocus>
       
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
       
        <button class="btn btn-lg btn-primary btn-block" >Sign in</button>
      </form>
	  

    </div> <!-- /container -->


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
  
  
    
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    
  </body>
</html>
注意:contentType: 'application/json',
type: 'POST',

程式的要求:post提交,json傳資料

返回值