當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery方式执行ajax请求

發布時間：2025/3/21 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery方式执行ajax请求小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

兩種請求:

執行get請求的格式:

$.get(url,function(data,status){
這里面一般用來處理服務器反饋的數據data,將data響應到頁面上
})

字節請求，不帶任何參數：

$.get("url");

需要帶上參數的話與平常的get請求參數傳遞一樣。

$.get("url?name=zhangsan&age=18");

執行post請求的格式:

$.post(url,data,function(data,status){
這里面一般用來處理服務器反饋的數據data,將data響應到頁面上
},“json”) 注意:執行post請求時一定要帶上數據格式"json"這是與get 的區別

直接，請求不帶上任何數據:

$.post("url" );

請求，帶上數據(以json的格式):

$.post("url" , {name:"xx" , age:99});

其中:
如果想要獲取服務器反饋的數據，需要在get里面在加一個參數。給定一個方法即可。服務器響應后，會執行該方法。
注意，方法里面的參數格式固定， data , status 。
data : 代表服務器響應過來的數據(多半是json和XML格式)，
status 代表這次請求的響應狀態碼(一般不需要這個參數)。

兩個例子:

一.模仿百度搜索提示

建立數據庫:

編寫前端頁

編寫servlet(url路徑):

public class FindWordServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {//獲取前端傳過來的wordString word = request.getParameter("word");WordDaoImpl dao = new WordDaoImpl();//得到模糊查詢出來的list集合List<Word> words = dao.findWord(word);//存放到request域中request.setAttribute("list",words);//在list.jsp中接受這個list集合request.getRequestDispatcher("list.jsp").forward(request,response);} catch (SQLException e) {e.printStackTrace();}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);} }

編寫支撐servlet處理數據的dao和daoImpl,返回一個wordBean的集合

public class WordDaoImpl implements WordDao {@Overridepublic List<Word> findWord(String word) throws SQLException {QueryRunner runner = new QueryRunner(JDBCUtils.getDataSource());String sql = "select * from word where word like ?";return runner.query(sql,new BeanListHandler<Word>(Word.class),word+"%");} }

用于接收集合的list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><table style="width: 100%"><c:forEach items="${list}" var="wordBean"><tr><td>${wordBean.word}</td></tr></c:forEach></table>

最重要的jquery代碼:

二.省市聯動

建立數據庫

前端頁面:

servlet獲取前端傳過來的pid去dao層處理數據:
其中涉及到兩個技術:
1.將集合對象轉化為XML對象的格式傳給前端(使用到xStream封裝好的的依賴包,用xStream.toXML()方法)
2.將集合對象轉化為json對象的格式傳給前端(使用json封裝好的依賴包,用JSONArray.fromObject(list).toString()方法)

public class CityServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {//1獲取前端傳過來的pid,轉化為bean中的int類型int pid = Integer.parseInt(request.getParameter("pid"));CityDaoImpl cityDao = new CityDaoImpl();//2.去dao數據處理層從數據庫獲取想要的city集合List<CityBean> list = cityDao.findCityByPid(pid);/*//利用xstream講list對象轉化為xml的字符串XStream xStream = new XStream();//想把pid做成屬性xStream.useAttributeFor(CityBean.class, "pid");//設置別名xStream.alias("city", CityBean.class);String xml = xStream.toXML(list);*///3.將list對象轉化為json對象數組JSONArray jsonArray = JSONArray.fromObject(list);String json = jsonArray.toString(); // System.out.println(json);response.setContentType("text/html;charset=utf-8");response.getWriter().write(json);//響應給前端頁面的數據} catch (SQLException e) {e.printStackTrace();}}

dao處理數據:

public class CityDaoImpl implements CityDao {@Overridepublic List<CityBean> findCityByPid(int pid) throws SQLException {QueryRunner runner = new QueryRunner(JDBCUtils.getDataSource());String sql = "select * from city where pid=?";return runner.query(sql,new BeanListHandler<CityBean>(CityBean.class),pid);} }

前端jq-ajax獲取到servlet響應回來的json對象(也就是回調函數里的參數data):

$(function () {//select一旦發生改變,就通過value值(也就是pid)去servlet中找到該省份對應的城市集合$("#province").change(function () {//清空select下的子元素option$("#city").empty()//發送一個post請求,把value的值(也就是pid)帶到servlet中,servlet響應回來一個data(xml,json)$.post("CityServlet",{pid:$(this).val()},function (data) {/*//處理xml類型的數據$(data).find("city").each(function () {var id = $(this).children("id").text();var cname = $(this).children("cname").text();$("#city").append("<option value='"+id+"'>"+cname);})*///處理json類型的數據$(data).each(function (i,n) {// alert(n.cname)$("#city").append("<option value='"+i+"'>"+n.cname);})},"json")})})

服務器響應回來的兩種數據格式:

1.json

[{"cname":"深圳","id":1,"pid":1},{"cname":"廣州","id":2,"pid":1},{"cname":"惠州","id":3,"pid":1},{"cname":"東莞","id":4,"pid":1}]

2.xml格式:

總結

以上是生活随笔為你收集整理的JQuery方式执行ajax请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Java数据库连接池知识汇总（C3P0+
下一篇： Maven教程详细总结+学习路线