zoukankan      html  css  js  c++  java
  • 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>

    忍一时,越想越气; 退一步,哎呦我去!
  • 相关阅读:
    《OD大数据实战》HDFS入门实例
    Python-操作Excel
    python操作word
    pandas操作Excel
    pyqt5-表格TableWidGet
    pyqt5-动画组QAnimationGroup
    pyqt5--动画
    pyqt5-QTDesigner--UI文件的使用方式
    pyqt5-QTDesigner--控件操作
    nodejs中cookie、session的使用
  • 原文地址:https://www.cnblogs.com/l-ialiu/p/13650422.html
Copyright © 2011-2022 走看看