Ajax入门

最新推荐文章于 2024-04-25 16:49:50 发布

dxy18861848756

最新推荐文章于 2024-04-25 16:49:50 发布

阅读量342

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/dxy18861848756/article/details/119831602

版权

Ajax， Asynchronous JavaScript and XML（异步JS和XML）。

Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用jQuery编写一个简易的联想器：

<html>
	<head>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  //引入jQuery
	</head>
	<body>
		<p>联想：
			<input type="text" id="text" >
			<div id="think"></div>
		</p>

		<script>
			//当输入框中键盘弹起时，就会触发
			$('#text').keyup(function(){
				$.ajax({
					url:"http://localhost:8080/user/fun",
					data:{"funname":$('#text').val()},
					success:function(data){
							$('#think').text(data.toString());
						}
					});
				});	
		</script>
	</body>
</html>

从中我们看出，ajax请求需要有三个必要的参数：

url，即请求的地址
data，请求的参数，可以放键值对
success，回调函数

另外，ajax请求默认是get方式，如果要用post，直接把请求方式从ajax改成post即可。

重要事件有：keyup（键盘弹起），onblur（失去焦点），click（点击）

写一个配套的后端：

@RestController
@RequestMapping("/user")
public class HelloController {

    static Map<String,String> map=new HashMap();
    static {
      map.put("a","apple");
      map.put("b","bird");
      map.put("c","cat");
      map.put("d","dog");
      //此处省略
    }

	//没起项目，直接从ftp请求http，会导致跨域问题，加上这个注解
    @CrossOrigin
    @GetMapping("/fun")
    String fun(@RequestParam String funname){
    	//当文本框为空时，传来的参数不是null，而是""
       if (funname.equals("")){
           return "";
       }else{
           return map.get(funname);
       }
    }
}

dxy18861848756

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Ajax入门

Ajax， Asynchronous JavaScript and XML（异步JS和XML）。Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用jQuery编写一个简易的联想器：<html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></sc
复制链接

扫一扫

Ajax入门

“相关推荐”对你有帮助么？