day08 数据的三种提交方式 get post和ajax

最新推荐文章于 2024-10-01 17:29:42 发布

原创最新推荐文章于 2024-10-01 17:29:42 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

22 篇文章

订阅专栏

本文深入解析了GET与POST请求方式的区别，包括它们在浏览器中的表现形式、安全性对比以及如何通过Servlet处理这两种请求。同时，文章提供了HTML表单与Servlet代码示例，并介绍了使用jQuery和Ajax进行异步数据提交的方法。

在这里插入图片描述

get方式和post方式提交请求

代码示例：
html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Get方式提交请求</h1>
	<form action="/WebNewLearn/LoginServlet" method="Get">
		用户名：<input type="text" name="username" required>
		密码：<input type="password" name="password" required>
		<input type="submit" value="提交">
	</form>
	
	
	<h1>Post方式提交请求</h1>
	<form action="/WebNewLearn/LoginServlet" method="Post">
		用户名：<input type="text" name="username" required>
		密码：<input type="password" name="password" required>
		<input type="submit" value="提交">
	</form>
</body>
</html>

servlet部分：

package com.MyNewLearn.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String usr=request.getParameter("username");
		String pwd=request.getParameter("password");
		response.getWriter().append("get方式请求：\n 用户名:"+usr+"\n 密码："+pwd);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String usr=request.getParameter("username");
		String pwd=request.getParameter("password");
		response.getWriter().append("post方式请求：\n 用户名:"+usr+"\n 密码："+pwd);
	}

}

简言之就是get方式不加密，在浏览器的链接栏部分会显示出提交的数据和数据的name；而post方式是加密的，浏览器链接栏不会显示提交的数据

ajax方式异步提交数据

jquery语法

//json创建对象
//{}大括号表示的是对象，是键值对的形式，名字:值
//[]表示的是数组
//方法格式$(selector).action
//$符号，括号里是选择器，action是指方法
		 var obj = {
				name:"gs",
				age:28,
				data:{
					name:'gs',
					age:34
				},
				arr:[1,3,5],
				arrobj:[
					{
						name:'gs',
						age:24
					},
					{
						name:'qcby',
						age:35
					}
				],
				gg:function(){
					
				}
		}

ajax语法

//给id="btn"的按钮加一个按钮反应，执行click中的方法
$("#btn").click(function(){
		//定义两个变量，值就是name和password中的值
		var name = $("#name").val();
		var password = $("#password").val();
//		$.ajax(对象)格式
		$.ajax({
			//url是提交的地址
			url:"/myWish/LoginServlet",
			//表示是异步还是同步，true表示异步
			async:true,
			//提交的类型
			type:"post",
			//数据
			data:{
				name:name,
				password:password
			},
			//成功之后的动作
			success:function(data){
				$("#info").append(data);
			},
			//失败后的动作
			error:function(error){
				alert("请求失败");
			}
		})
	})
	$.ajax({
		url,
		async,
		type,
		data,
		success,
		error
	})

jquery语法

		JSON.parse();//把json字符串转成json对象,不转换之前一般就是字符串类型
		json数据类型string number boolean undefined null object function array 前五种是基本类型，后三种是复合类型
		console.log(typeof data);//日志输出
		//两种方法都可以获取输入框的值
		var username=$("#username").val();//最后的括号如果不加会出现undefined的值
		var id=document.getElementById("id").value;
		function del(event){
			var id=event.id;
			//获得触发方法的组件的id
			//console.log(event.id);
			//获得th的内容
			var id=$("#id_"+vid)[0].innerHTML;
		}