ajax本地传值与收值

对于ajax的传值,本人前端小白,正处于学习之中,刚刚在找了一些文章,自己写了一个本地的两个页面的传值与接收值。

大家可以看看,有什么宝贵的意见,欢迎大家提出,有自己的理解也可以说一下。谢谢!!!

因为是本地的简单传值与接收值,所以写两个html的页面引入jq就好。

 

这是传值的页面:

 

 

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="sss" enid='endid' >
测试框
</div>
<div class="lingyigezhi">
</div>
<button type="button"><a href="ajax收到值.html">按钮</a></button>
<script type="text/javascript">
$(function(){
$('button').click(function(){//点击按钮时,执行方法
var enids=$('#sss').attr('enid'); //获取div的属性enid的值
var lings=$('.lingyigezhi').attr('class') //获取另一个div的属性class的值
$.ajax({ //ajax 执行与使用
url:'./ajax收到值.html', //因为是本地的两个文件,要放到同一个文件夹内,所以是 ./文件名
methods:'get', //提交方式
dataType:'text', //返回数据格式
data:{ //提交时传给后台的判断数据,后台根据这些东西决定返回给前端什么数据,在这个请求中属于没什么用。
enid:enids,
ling:lings,
},
success:function(){//请求成功的函数

//其实上面那些只有发送真正请求并且又返回数据时才会生效,目前这种本地的请求,是一点用都没有,没有后台判断,也不会有数据返回, 但我还是写了。。。。。。
location.href='ajax收到值.html?enid='+enids+'?ling='+lings+'?js=js#456';//我对这一句的理解就是设置接收值的页面的url。
//请求成功,将本地的url设置为需要跳转的页面的url,从而实现页面的跳转
}

})
})
})
</script>
</body>
</html>

 

接收的页面

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="a2">
哈哈哈哈
</div>
<script type="text/javascript">
$(function(){

//接收值的方法,我的理解就是通过页面的url,然后提取页面url里面自己需要的某一个或者一组数据,然后根据这个数据进行当前页面的显示设置
//下面是一些拿取网页url内部所需数据的一些简单语句,更多还需努力发现

console.log("本网页的url字符串为:"+window.location.href);//拿取到本页面的url所有字符,
//因为我的页面url内有中文所以会出现http://127.0.0.1:8848/tiaoshi/ajax%E6%94%B6%E5%88%B0%E5%80%BC.html?enid=endid?ling=lingyigezhi?js=js 这种情况。
//我的中文字符 收到值 在url内的显示为%E6%94%B6%E5%88%B0%E5%80%BC

console.log("本网页的端口号"+window.location.port);
//拿取到本页面url的端口号

console.log("本网页的url协议为:"+window.location.protocol);
//拿取到本页面的url协议

console.log("本网页的href属性中跟在问号后面的部分为:"+window.location.search);
//拿取到url内?后面的内容,他会拿取第一个?后面的所有内容,入股不是自己需要的就需要自己对内容进行提取了

console.log("本网页的host "+window.location.host);
//拿取到本页面的host名


var zijiurl=window.location.search;
var urlDeDengHao=zijiurl.substring(zijiurl.lastIndexOf('=')+1,zijiurl.length);
console.log("本网页变量的值,等号后面的部分"+urlDeDengHao);
//拿取本页面url内=后面的值,我是从别的地方看到的,不太清楚他的原理。。。
//显示的是最后一个等号后面的值

console.log("本网页的url路径"+window.location.pathname);
//拿取本网页的url路径

console.log("本网页# 后面的内容"+window.location.hash);
//拿取本网页的url路径里面#后面的内容,包括#

})
</script>
</body>
</html>

 

posted @ 2020-09-11 10:55  伊人兮明眸秋水  阅读(264)  评论(1编辑  收藏  举报