前端复习总结一

最新推荐文章于 2024-11-07 19:48:34 发布

永远的小白白~

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量258

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_60232519/article/details/122287363

版权

一.form表单提交

方式一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
	</head>
	<body>
		<form action="http://localhost:8081/user" method="post">
			<tr>
				<td>
					用户名：<input name="username" type="text"/>
				</td>
			</tr>
			<tr>
				<td>
					密码：<input name="password" type="text"/>
				</td>
			</tr>
			<tr>
				<td>
					<input value="登录" type="submit"/>
				</td>
			</tr>
		</form>
	</body>
</html>

package com.example.myajax.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class TestController {

    @PostMapping("/user")
    @ResponseBody
    public String add(String username,String password){
        System.out.println("返回数据了"+username+"--------"+password);
        String str = "返回值是"+username+password;
        return str;
    }
}

效果：

方式二（Ajax提交）：

前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
	</head>
	<body>
		<form action="#" method="post" id="fromtest" onsubmit="return false">
			<tr>
				<td>
					用户名：<input name="username" type="text"/>
				</td>
			</tr>
			<tr>
				<td>
					密码：<input name="password" type="text"/>
				</td>
			</tr>
			<tr>
				<td>
					<input value="登录" type="button" onclick="login()"/>
				</td>
			</tr>
		</form>
	</body>
	<script src="../plugins/js/jquery-1.4.2.min.js"></script>
	<script src="../plugins/js/jquery-1.4.2.js"></script>
	<script type="text/javascript">
		function login() {
			$.ajax({
				type:"POST",
				dataType:"test",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
				url:"http://localhost:8081/user",
				data:$('#fromtest').serialize(),//serialize表示自动提取表单数据
				success:function(result){
					alert("成功！")	
					console.log(result)
					if(result.resultCode==200){
						alert("SUCCESS!")	
					}
				},
				error:function(result){
					alert("失败！")
					console.log(result);
				}
			})
		}
	</script>
</html>

后端代码：

package com.example.myajax.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class TestController {

    @PostMapping("/user")
    @ResponseBody
    public String add(String username,String password){
        System.out.println("返回数据了"+username+"--------"+password);
        String str = "返回值是"+username+password;
        return str;
    }
}

测试结果;

控制台输出;

这种错误是因为跨域问题造成的，只需要在Controller加个注解即可解决，最终后端代码：

package com.example.myajax.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@CrossOrigin//解决跨域攻击问题
public class TestController {

    @PostMapping("/user")
    @ResponseBody
    public String add(String username,String password){
        System.out.println("返回数据了"+username+"--------"+password);
        String str = "返回值是"+username+password;
        return str;
    }
}

报错说明：

这种错误很低级，一般都是因为粗心导致的大家一定要好好检查自己的Ajax写法是否正确我这里是因为写法错了

方式三：

前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
	</head>
	<body>
		<div>
			<form action="#" method="post" id="fromtest" onsubmit="return false">
				<tr>
					<td>用户名：</td>
					<td><input name="username" type="text"/></td>	
				</tr>
				<tr>
					<td>密码：</td>
					<td><input name="password" type="text"/></td>
				</tr>
				<tr>
					<td>
						<input value="登录" type="button" onclick="login()"/>
					</td>
				</tr>
			</form>
		</div>
	</body>
	<script src="../plugins/js/jquery-1.4.2.min.js"></script>
	<script src="../plugins/js/jquery-1.4.2.js"></script>
	<script src="../plugins/js/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function login() {
			$('#fromtest').form("submit",{
				url:"http://localhost:8081/user",
				onsubmit:function(){
					//这里可以验证表单是否可以提交，否则返回false
				},
				success:function(data){
					alert("欧克")
					console.log(data)
				}
			})
		}
	</script>
</html>

后端代码不变，这里需要引入一下jquery文件和easyui文件

效果：