使用JSON與jQuery實現Ajax

時間 2019-11-17

標籤使用 json jquery 實現 ajax 欄目 JavaScript 简体版

原文原文鏈接

一、概述javascript

二、JSONcss

添加jQuery提示：html

效果：java

樣例：jquery

jsonDemo.jspweb

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
 <script type="text/javascript" src="js/jsonDemo.js"></script>
 <style type="text/css">
  table {color:red;}
 </style>
</head>
<body>
 <div id="msg"></div>
 <div id="msg2"></div>
 <input type="button" value="JSON/string轉換" id="btn"><br>
 <input type="button" value="string/JSON轉換" id="btn2">
</body>
</html>

jsonDemo.jsajax

$(function () {
 var person = {"name":"zhangsan","age":20,"wife":null};
 var person2 = {"name":"lisi","age":30,"wife":true};
 
 $("#msg").append("姓名:" + person.name + "<br>")
   .append("年齡:" + person.age + "<br>")
   .append("配偶:" + person.wife);
   
 // 對象數組  
 var arr = [person,person2];
 /*$("#msg2").append("<table>")
   .append("<tr>")
   .append("<td>姓名</td>")
   .append("<td>年齡</td>")
   .append("<td>配偶</td>")
   .append("</tr>");
 for (var i = 0 ; i < arr.length ; i++) {
  $("#msg2").append("<tr>");
  $("#msg2").append("<td>" +person.name+ "</td>")
      .append("<td>" +person.age+ "</td>")
      .append("<td>" +person.wife+ "</td>");
  $("#msg2").append("</tr>");
 }
 $("#msg2").append("</table>");
 alert($("#msg2 table").get(0).tagName);
 $("#msg2 table").attr('border','1px');
 $("#msg2 table").trigger("create");*/
 
 var html = "";
 html += "<table border='1px'>";
 html += "<tr>";
 html += "<td>姓名</td>";
 html += "<td>年齡</td>";
 html += "<td>配偶</td>";
 html += "</tr>";
 for (var i = 0 ; i < arr.length ; i++) {
  html += "<tr>";
  html += "<td>" +person.name+ "</td>";
  html += "<td>" +person.age+ "</td>";
  html += "<td>" +person.wife+ "</td>";
  html += "</tr>";
 }
 html += "</table>";
 $("#msg2").html(html);
 
 $("#btn").click(function () {
  console.log(JSON.stringify(person));
 });
 $("#btn2").click(function () {
  var str = '{"name":"admin"}';
  var obj = JSON.parse(str);
  console.log(obj.name);
 });
 
})

三、服務器端實現Ajaxapache

樣例：json

ajaxDemo.jsp數組

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
 <script type="text/javascript" src="js/ajaxDemo.js"></script>
</head>
<body>
 <form action="" method="post" id="myForm">
  姓名:<input type="text" name="name"><br>
  年齡:<input type="text" name="age"><br>
  <input type="button" id="btn" value="使用Ajax傳遞數據" onclick="ajaxClick()">
 </form>
 <div id="msg"></div>
</body>
</html>

ajaxDemo.js

function ajaxClick() {
 var name = $("form > input[name='name']").val();
 var age = $("form > input[name='age']").val();
 $.ajax({
  url:"ajax/getData",
  type:"post",
  data:{
   "name":name,
   "age":age
   },
  dataType:"json",
  success:function (data) {
    html = "姓名:" + data.name +"年齡:"+ data.age;
    $("#msg").html(html);
   },
  error: function () {
   console.log("ajax請求失敗。");
   }
 });
}

struts.xml

 <package name="ajax" namespace="/ajax" extends="json-default">
        <action name="getData" class="com.ljb.web.action.DataAction" method="getData">
            <result type="json">
                <param name="includeProperties">
                    name,age
                </param>
            </result>
        </action>
    </package>

DataAction

package com.ljb.web.action;
import com.opensymphony.xwork2.ActionSupport;
public class DataAction extends ActionSupport {
 private String name;
 private int age;
 
 public String getData () {
  return SUCCESS;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public int getAge() {
  return age;
 }
 public void setAge(int age) {
  this.age = age;
 }
}

四、實現無刷新登錄

樣例：

loginDemo.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
 String userName = String.valueOf(session.getAttribute("username"));
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
 <script type="text/javascript">
  var userName = "<%=userName%>";
 </script>
 <script type="text/javascript" src="js/loginDemo.js"></script>
</head>
<body>
 <div id="loginDiv">
  用戶名:<input type="text" name="username"><br>
  密碼:<input type="password" name="pwd"><br>
  <input type="button" value="登錄" id="btn"><br>
  <span id="msg"></span>
 </div>
 <s:debug></s:debug>
</body>
</html>

loginDemo.js

$(function () {
 $("#btn").click(function () {
  var username = $("div > input[name='username']").val();
  var pwd = $("div > input[name='pwd']").val();
  var params = {"username":username,"pwd":pwd};
  
  $.ajax({
   url:"login/login",
   type:"post",
   data:params,
   dataType:"json",
   success:function (data) {
     if (data.msg == "登錄成功") {
      $("#loginDiv").html("");
      html = "";
      html += "歡迎你,"+userName;
      $("#loginDiv").html(html);
//      $("#loginDiv").append("<input type='button' value='退出'>"); 
     } else {
      $("#msg").html("用戶名或密碼錯誤。");
     }
    },
   error:function (data) {
    console.log("Ajax請求失敗。");
   }
  });
 });
})

struts.xml

<package name="login" namespace="/login" extends="json-default">
        <action name="login" class="com.ljb.web.action.LoginDemoAction" method="login">
            <result type="json"></result>
        </action>
    </package>

LoginDemoAction

package com.ljb.web.action;
import java.util.Map;
import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionSupport;
public class LoginDemoAction extends ActionSupport implements SessionAware{
 private String username;
 private String pwd;
 private String msg;
 private Map<String,Object> session;
 
 public String login () {
  if (username.equals("admin") && pwd.equals("111111")) {
   session.put("username", username);
   msg = "登錄成功";
  } else {
   msg = "登錄失敗";
  }
  return SUCCESS;
 }
 
 public String getUsername() {
  return username;
 }
 public void setUsername(String username) {
  this.username = username;
 }
 public String getPwd() {
  return pwd;
 }
 public void setPwd(String pwd) {
  this.pwd = pwd;
 }
 public String getMsg() {
  return msg;
 }
 public void setMsg(String msg) {
  this.msg = msg;
 }
 @Override
 public void setSession(Map<String, Object> session) {
  // TODO Auto-generated method stub
  this.session = session;
 }
 
}

五、小結