ajax交互方法实现

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

可使用jQuery的Ajax与Java通过POST方式进行交互

实现代码样例具体如下:

html代码

<body>
    <div id="main">
        <button id="myBut">Ajax获取数据</button>
        <div id="container"></div>
    </div>
</body>

style代码

<style type="text/css">
#main {
    margin: 0 auto;
    width: 400px;
}
#container {
    width: 400px;
    height: 300px;
    border: 1px dashed #666;
    text-align: center;
    line-height: 300px;
}
</style>

javastript代码

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function() {
        $(‘#myBut‘).click(function() {
            $.post("JqueryAjaxServlet", {
                age : 18,
                name : "zhang"
            }, function(data, textStatus) {
                var container = $(‘#container‘);
                var resultData = $.parseJSON(data);
                var age = resultData.age;
                var name = resultData.name;
                container.html("name:" + name + "," + "age:" + age);
            });
        });
    });
</script>

java代码

public class JqueryAjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String age = request.getParameter("age");
        String name = request.getParameter("name");

        String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
                + "\":" + age + "}";
        System.out.println(personJSON);
        response.getWriter().write(personJSON);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doGet(request, response);

    }

}

web.xml代码

<servlet>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <servlet-class>com.jquery.ajax.com.JqueryAjaxServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <url-pattern>/JqueryAjaxServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

另附其他实现代码:

ajax调用后台java类的例子  blog.csdn.net/rznice/article/details/43561645

java + jquery + ajax + json 交互 http://yangchunhe.iteye.com/blog/1751239

时间: 2024-10-10 03:15:11

ajax交互方法实现的相关文章

jQuery ajax 与服务器交互方法

1.HTML <table> <tr> <td>用户名:</td> <td><input type="text" name="username" id="name"></td> </tr> <tr> <td>密 码:</td> <td><input type="password"

[JavaWeb基础] 017.Struts2 和 ajax交互简介

在网页开发中,我们为了只对网页的某块内容进行实时更新,而不对其他不需要更新的内容进行刷新,从而提高响应速度和节省流量,我们采用了页面的异步刷新技术Ajax,那么我们的Struts2框架在这一方面是如何实现的呢,其实也很简单,下面我带大家一起了解下. 1.首先我们需要导入两个依赖包json-lib 和 struts2-json-plugin,这是对json支持的解析包. 2.我们需要创建一个Action类,和其他的都一样 package com.babybus.sdteam.action; imp

springmvc与ajax交互

Jsp页面: 需要引入jquery-1.10.2.min.js.json2.js.jquery.json-2.3.js三个文件 <%@ page contentType="text/html; charset=utf-8" language="java" errorPage=""%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/co

前后端数据交互方法

在此介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率. 此文章适合前后端协同开发经验不足的新手阅读. 目录: HTML赋值 JS赋值 script填充JSON AJAX获取JSON WebSocket实时传输数据 总结 HTML赋值 输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> &

ajax交互servlet返回数据和jdbc模糊查询-中文-已经设置了UTF-8和解决了乱码

1.编码是将字符按一定翻译方式转换成字节存储在内存或外存中,解码是按照一定翻译方式将存储中的字节转换成字符. 2.ASCII是单字节,最高位总为0,相当于只占用了一个字节的7位,2^7=128个字符,相当于键盘上的128个键,有大小写因为字母,有*,%¥#@!+....等这些可显示字符,也有不可以显示的控制符F1,ctr... 而ISO-8859-1是启用了ASCII码的最高位,理论上是能再多128位,实际上没用掉这么多,至于多了那些,你们自己查下表 UTF-8是可变长的,具体中文几个字节,怎么

两种ajax的方法

两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技术已经被人们广泛应用,而对于一些对Web的了解还不是很深入的初学者,Ajax依然带着一层神秘的难懂的色彩,今天就在这里给大家以简单的方式解读一下Ajax的实现步骤和原理,并且给大家两种实现Ajax的方法,js和jquery. 首先ajax其实就是js+xml的技术,前端的表现就是一段js代码.要使用

【Servlet】Servlet3.0与纯javascript通过Ajax交互

这是一个老生常谈的问题,对于很多人来说应该很简单.不过还是写写,方便Ajax学习的后来者.虽然js.html是一个纯静态的页面,但是以下的程序必须挂在Tomcat服务器上,才能做到Ajax交互,否则看不出效果的.Eclipse for javaee注意把做好的工程挂在Tomcat上,才运行Tomcat.本工程除了JSP必须的Servlet包以外,无须引入其它东西.其实想直接用一个JSP页面完成这个工程的,但是现在搞JSP的,基本上没有人直接在.jsp文件中写东西了吧?后台动作都扔到.java里面

前后端如何实现ajax交互 https://www.imooc.com/article/10371

慕课网 免费课程 职业路径 实战 猿问 手记 下载APP 购物车 登录 / 注册 前端入门 Java小白入门 手记 \ 一个小案例搞懂前.后端是如何进行数据交互的 一个小案例搞懂前.后端是如何进行数据交互的 原创 2016-07-12 17:08:1258940浏览32评论 分享到 小字号 fhw2087 Web前端工程师做爱做的事 14篇手记13推荐 作者的热门手记 html+css+js制作简单钟表 4813浏览64推荐5评论 html+css+js扫雷原代码,可以直接试玩了 2703浏览4

ajax是什么?ajax交互模型?

AJAX的全称是Asynchronous JavaScript and XML(异步加载  JavaScript 和 XML). ajax不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某