jQuery+json은 Ajax 호출 기능을 만듭니다(코드 포함).-JS 튜토리얼-php.cn

jQuery+json은 Ajax 호출 기능을 만듭니다(코드 포함).

php中世界最好的语言

풀어 주다： 2018-04-25 15:45:11

원래의

1436명이 탐색했습니다.

이번에는 Ajax 호출 함수(코드 포함)를 만들기 위한 jQuery+json을 가져오겠습니다. jQuery+json으로 Ajax 호출 함수를 만들 때 사용할 주의 사항은 무엇입니까?

Userservlet.java 코드:

package com.iss.servlet;
import org.json.JSONException;
import org.json.JSONObject;
import com.iss.pojo.User;
import com.iss.util.JSONUtil;
public class UserServlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request, response);
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  //list 添加对象
  List<User> userList = new ArrayList<User>();
  User user1 = new User("张三", "男", "18");
  User user2 = new User("李四", "男", "19");
  User user3 = new User("王五", "男", "20");
  userList.add(user1);
  userList.add(user2);
  userList.add(user3);
  PrintWriter out = response.getWriter();
  String str = null;
  try {
   //帐号密码如果匹配则把list 返回给界面
   if (request.getParameter("userName").equals("jquery")
     && request.getParameter("password").equals("ajax")) {
    str = JSONObject.quote(JSONUtil.toJSONString(userList));
   }
   out.print(str);
  } catch (JSONException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  System.out.println("str "+str);
  out.flush();
  out.close();
 }
}

로그인 후 복사

Html 코드:

<body>
 帐号 jquery 密码 ajax
 <form id="mainform">
  <ul>
   <li>
    帐号
    <input type="text" name="userName" />
   </li>
   <li>
    密码
    <input type="password" name="password" />
   </li>
   <li>
    <input onclick="login()" type="button" value="登录" />
   </li>
  </ul>
 </form>
 查询到的数据
 <p id="pa">
 </p>
 <script type="text/javascript">
   function login(){
   //获取form的参数
   var args =$("#mainform").serialize();
   //调用 jquery 的json获取方法
   //三个参数分别为 ：请求路径 ，请求参数，返回数据的回调函数
   $.getJSON("servlet/UserServlet",args,function (data){
   if(data!=null){
   // 界面返回的是一个json格式字符串 调用JSON.parse()把数据转化为json
   // 格式的对象
   var jsondata =JSON.parse(data);
   parseData(jsondata);
   }else{
   alert("帐号密码输入有误");
   }
   })
   }
   function parseData(data){
   var str="";
   //遍历json格式数据
   for (var key in data){
   strstr =str+" 用户"+data[key].userName+" 年龄"+data[key].age+"<br/>"
   alert(str);
   }
   //把数据添加到p中
   $("#pa").html(str);
   }
  </script>
</body>

로그인 후 복사

UserServlet 도구 클래스 JSONStringObject를 가져오는 것을 잊지 마세요 JSONUtil

jsp jquery.js 및 json.js를 가져오려면

사례를 읽은 후 방법을 마스터했다고 생각합니다. 이 기사 및 기타 내용이 얼마나 흥미로웠는지, PHP 중국어 웹사이트의 다른 관련 기사에도 주목해 주세요!