jQuery中ajax的使用

来源：互联网发布：架子鼓训练软件安卓版编辑：程序博客网时间：2024/06/06 14:21

jQuery是轻量级的javascript框架

1：轻量级的javascript框架

2：强大的选择器

3：出色的dom操作

4：兼容性强

5：出色的ajax操作

操作步骤：

                                     $.ajax({
                                                type:"post", //提交方式
                                                url:"msg?method=add",//servlet路径以及要传的参数
                                                data:"name="+name+"&content="+content,//要传的参数
                                                success:function(result){//success表示服务器处理和响应正常，result代表的是处理之后返回的结果值                                
                                                                   alert(result);     
                                                }
                                      })

eg：用jQuery中的ajax来实现一个简单的聊天室功能

po包：有一个Message类，有name，createTime，content，id四个属性

dao包：有一个通过查找范围来查找信息方法，还有一个发言的方法

前端页面：

<%@ 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.4.2.js"></script>
<script type="text/javascript">
          $(function(){
                    showMessage();
                   $("#btn").click(function(){
                             var name =$("#name").val();//取发言人名称
                             var content=$("#content").val();//取发言内容
                             if (name.length>0&&content.length>0) {
                                      $.ajax({
                                                type:"post",
                                                url:"msg?method=add",
                                                data:"name="+name+"&content="+content,//将发言人名称和内容通过参数传递
                                                success:function(result){//如果处理和相应都正常
                                                          if ("1"==result) {//发言成功，清空发言人信息
                                                                   $("#name").val("");
                                                                   $("#content").val("");
                                                                   showMessage();//刷新页面显示发言信息
                                                          }else{
                                                                   alert("服务器忙，待会再试！");
                                                          }
                                                }
                                      })
                             }
                   });
          });
          function showMessage(){//显示发言信息的方法
                   $.ajax({
                             type:"post",
                             url:"msg?method=list",
                             data:"size=100",//设置查找范围为后100条记录
                             success:function(result){
                                      $("#box").html(result);
                             }
                   })
          }
          setInterval("showMessage()", 5000);//设置每隔五秒刷新一次页面
</script>
<style type="text/css">
          #box {
          width:800px;height:500px;border:1px solid #ff0000;margin:0 auto;overflow:scroll}
                   #info {
          width:800px;height:50px;margin:0 auto;margin-top:20px;}
          </style>
</head>
<body>
          <div id ="box"></div>
                   <div id ="info">
                             <input type ="text" id= "name">
                             <input type ="text" id= "content" size="50">
                             <input type ="button" id= "btn"value ="发言">
                   </div>
</body>
</html>

业务逻辑servlet部分

package com.zt.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zt.dao.MessageDao;
import com.zt.dao.impl.MessageDaoImpl;
import com.zt.po.Message;

public class JQueryAjax2 extends HttpServlet {
    MessageDao messgaedao ;
    @Override
    public void init() throws ServletException {
         messgaedao =new MessageDaoImpl();
    }

    @Override
    protected void service(HttpServletRequest request , HttpServletResponse response )
            throws ServletException, IOException {
    String name =request.getParameter("method");
    if ("add".equals(name)) {
        add(request,response);
    }
    if ("list".equals(name)) {
        list(request,response);
    }

    }
    protected void add(HttpServletRequest request , HttpServletResponse response )
            throws ServletException, IOException {
        String name =request.getParameter("name");
        String content =request.getParameter("content");
        PrintWriter out =response.getWriter();

        boolean f =messgaedao.addMessage(name, content);
        if (f) {
            out.print(1);
        }else {
            out.print(0);
        }
        out.flush();
        out.close();
    }
    protected void list(HttpServletRequest request , HttpServletResponse response )
            throws ServletException, IOException {
        int size =100;
        String sizeStr =request.getParameter("size");
        if (sizeStr!=null&&!"".equals(sizeStr)) {
            size=Integer.parseInt(sizeStr);
        }
        List<Message> messages = messgaedao.fiindMessageBySize(size);
        PrintWriter out =response.getWriter();
        StringBuffer sBuffer =new StringBuffer();
        //倒序输出
        for (int i =messages.size()-1; i >=0; i--) {
            Message m =messages.get(i);
            sBuffer.append("<p>");
            sBuffer.append(m.getName()+"说:"+m.getContent());
            sBuffer.append("</p>");
        }
        out.print(sBuffer);
        out.flush();
        out.close();
    }
}

阅读全文

0 0