ajax交互方法实现

时间：2023-02-16 10:46:48

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

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

  1. jQuery ajax 与服务器交互方法

    1.HTML <table> <tr> <td>用户名:</td> <td><input type="text" ...

  2. ThinkPHP中使用ajaxReturn进行ajax交互

    以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...

  3. struts2 的验证框架validation如何返回json数据 以方便ajax交互

    struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror  />才能取出,(EL应该也可以). 如果使 ...

  4. Python搭建Web服务器，与Ajax交互，接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  5. 关于文件上传的ajax交互

    首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...

  6. jq的ajax交互封装

    jq封装的ajax,然后 在此前和此后都是很多要考虑的  ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...

  7. 两种ajax的方法

    两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...

  8. &lbrack;JavaWeb基础&rsqb; 017&period;Struts2 和 ajax交互简介

    在网页开发中,我们为了只对网页的某块内容进行实时更新,而不对其他不需要更新的内容进行刷新,从而提高响应速度和节省流量,我们采用了页面的异步刷新技术Ajax,那么我们的Struts2框架在这一方面是如何 ...

  9. Ajax&period;BeginForm方法 参数

    感谢博主 http://www.cnblogs.com/zzgblog/p/5454019.html toyoung 在Asp.Net的MVC中的语法,在Razor页面中使用,替代JQuery的Aja ...

随机推荐

  1. Obtaining Query Count Without executing a Query in Oracle D2k

    Obtaining Query Count Without executing a Query in Oracle D2k Obtaining a count of records that will ...

  2. UWP开发随笔——使用SQLite数据库

    摘要 大多数的app都需要数据存储,在数据存储这方面,强大的windows把app数据分为两种:settings和files,并提供了十分简洁的api,让开发者能够轻松使用.但是在有些场景下,app的 ...

  3. windows phone &lpar;22&rpar; 隐藏元素

    原文:windows phone (22) 隐藏元素 在wp中我们也会用到隐藏某个元素,已达到某种效果,刚刚从文章看到了,分享一下[作者:神舟龙] Visibility 此属性能非常方便的实现隐藏某个 ...

  4. Dynamics CRM 构建IN查询

    CRM中有3种查询数据的方式,分别是QueryExpression.fetchxml.linq,本篇讲述的条件IN的查询只支持前两种,linq并不支持. QueryExpression的写法如下,示例 ...

  5. vue在body上面绑定enter事件

    mounted () { this.bodyListener = (e) => { if (e.keyCode === 13 && e.target === document.b ...

  6. 转载 Python中关键字global与nonlocal的区别

    转载自CSDN 雁丘1990, 原文地址: https://blog.csdn.net/xcyansun/article/details/79672634 这篇文章写的很赞, 条理清晰, 分析循序渐进 ...

  7. 《剑指offer》第六十题（n个骰子的点数）

    // 面试题60:n个骰子的点数 // 题目:把n个骰子扔在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s // 的所有可能的值出现的概率. #include <iostream> ...

  8. 应用层协议FTP、DNS协议、HTTP协议分析

    分析所用软件下载:Wireshark-win32-1.10.2.exe 一．阅读导览 1．分析FTP协议 2．分析DNS协议 3. 分析HTTP协议 二．分析要求 (1)ftp部分: 学习 Serv- ...

  9. Leetcode题库——24&period;两两交换链表中的节点

    @author: ZZQ @software: PyCharm @file: swapPairs.py @time: 2018/10/20 19:49 说明:给定一个链表,两两交换其中相邻的节点,并返 ...

  10. elasticsearch安装与使用（4）-- 安装中文分词插件elasticsearch 的 jdbc

    前言 elasticsearch(下面简称ES)使用jdbc连接mysql比go-mysql-elasticsearch的elasticsearch-river-jdbc能够很好的支持增量数据更新的问 ...

相关文章