使用Ajax进行前后端交互（一）

实现我们需要做好准备工作

本章涉及到的架包有：

jackson-annotations-2.9.8.jar
jackson-core-2.9.8.jar
jackson-databind-2.9.8.jar
servlet-api.jar

还有js文件jQuery-3.2.1.min.js以及tomcat8.0

接下来我们新建项目

（记得要勾选Web Application（4.0）和Create web.xml）

项目名我这里就叫 Ajax_SCDN,然后点击Finsih

项目建好之后，我们把web路径下的index.jsp删除，因为本章使用的是Ajax做前后端交互，用不到jsp。

右击web文件，选择新建html文件，取名为index

在web/WEB-INF路径下我们找到web.xml文件，双击打开，将index.html页面设置为欢迎页

我们现在集成一下tomcat

点击这个加号，下Tomcat Servlet，将鼠标放在Local上点击一下，

我们单独

将Name更改为tomcat，并点击Deployment

点击右上角加号，选择第一个选项

将我们的项目集成上tomcat 点击ok即可

随后我们运行一下整个项目，初始化页面是空白，只要能进入游览器即可

随后我们在右击web文件夹，新建js文件夹，将jQuery-3.2.1.min.js拷贝进去

然后右击web/WEB-INF文件新建lib文件夹，将我们的架包拷进去，按要求点击add as libaray

将架包集成进来

我们打开index.html在文件中引入jQuery文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入jQuery文件--><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>你好我是index.html
</body>
</html>

在body中定义一个buttom按钮，点击按钮，运行btn()函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入jQuery文件--><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>你好我是index.html
<input type="button" value="点击我执行btn()函数" onclick="btn()">
</body>
</html>

我们在把Ajax的固定使用方式写在btn()函数内，并把Ajax的基本属性写好

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入jQuery文件--><script src="js/jquery-3.2.1.min.js"></script><script>function btn() {$.ajax({url:"",/*设置访问服务器的地址*/type:"",/*设置跳转服务器时使用的POST还是GET请求*/data:"",/*跳转服务器是传递给服务器参数  格式为: name=张山&aga=15*/success:function (info) {//info表示服务器返回的参数},error:function () {//没有访问到服务器是进入error},dataType:""//传递数据的格式 例如：text、json});}</script>
</head>
<body>你好我是index.html
<input type="button" value="点击我执行btn()函数" onclick="btn()">
</body>
</html>

右击src文件夹，new一个Package，包名为com.servlet,点击ok

右击com.servlet,在选项栏下方，找到Servlet，new一个Servlet，

新建Ajax之后，我们在新建的页面中确定一下虚拟地址，对象Ajax访问服务器要用

package com.servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;//这个是我们的虚拟地址
@WebServlet(urlPatterns = "/Servlet")
public class Servlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");response.setContentType("text/html");//我们参数一个数据给Ajaxresponse.getWriter().print("ajax通过post请求访问到了服务器");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
}

同时在index.index页面中设置对应的属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入jQuery文件--><script src="js/jquery-3.2.1.min.js"></script><script>function btn() {$.ajax({url:"Servlet",/*设置访问服务器的地址*/type:"POST",/*设置跳转服务器时使用的POST还是GET请求*/data:"",/*跳转服务器是传递给服务器参数  格式为: name=张山&aga=15*/success:function (info) {//info表示服务器返回的参数alert(info);//返回数据我们在提示框中输出},error:function () {//没有访问到服务器是进入erroralert("抱歉没有访问到服务器");//如果没有访问到服务器提示框输出这个},dataType:"text"//传递数据的格式 例如：text、json});}</script>
</head>
<body>你好我是index.html
<input type="button" value="点击我执行btn()函数" onclick="btn()">
</body>
</html>

这个时候我们运行一下项目看看，游览器有没有访问到服务器

运行ok，本期讲解到这了。有问题可用留言或者私信。谢谢大家

使用Ajax进行前后端交互（一）相关推荐

Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
目录一.前后端二.前后端接口三.Ajax 1. ajax接口步骤 2. 返回为json格式四.请求方式五.案例:登录一.前后端前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
ajax+node前后端交互学习笔记（1）
大致理解前后端交互的概念当你去餐馆吃饭的时候,坐下后服务员会带着⼀个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐⼀ ...
struts2、ajax实现前后端交互
跳过struts2环境搭建部分,或者可以看我的博客(http://www.cnblogs.com/zhangky/p/8436472.html),里面有写,很详细. 需要导入的jar包(struts官 ...
【前端】前后端交互重点Ajaxの介绍及实战
❤️Ajax❤️ 每篇前言: 第一部分:JSON简介效果展示: 第二部分:前后交互 1.此处介绍前后交互的两种方式: (1)利用form表单里的name属性进行前后端交互 HTML代码: Pytho ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)
众所周知jsp是已经入土的技术,虽然仍有不少老项目在用,但已经不值得花时间学习了,当然了解一下也是可以的.如果你是一位萌新后端,不想了解jsp,或者想做一个前后端分离的项目,想在纯html网页上实现前 ...
前后端交互之——AJAX提交
前言学前后端也有一段时间了,一直没有时间整理一下前后端交互方面的知识,想着再回顾一下顺带着整理出自己的学习笔记.可能有些地方写的不是很好,欢迎批评指正!!! 目录前言一.AJAX是什么二.AJ ...
[JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...

使用Ajax进行前后端交互（一）

使用Ajax进行前后端交互（一）相关推荐

最新文章

热门文章