使用Ajax获取数据并利用localStorage储存与传递值的方法

最编程 2024-07-24 08:38:07

...

1.search页面 html 代码：

<div class="content">
    <form class="mui-input-group" id="from">
        <div class="mui-input-row">
        <label>姓名</label>
        <input type="text" class="mui-input-clear"  placeholder="请输入姓名">
        </div>
        <div class="mui-input-row">
        <label>身份证号</label>
        <input type="text" id="identityCard" value="" class="mui-input-clear" placeholder="请输入身份证号">
        </div>
        <div class="mui-input-row">
        <label>性别</label>
        <input type="text" class="mui-input-clear" placeholder="请输入性别">
        </div>
                
        <div class="mui-button-row">
        <button type="button" onclick="query()">开始查询</button>
        <button type="button" onclick="reset()">重置</button>
        </div>
    </form>
            
</div>

2.search页面 js 代码：

<script type="text/javascript">

    $(document).ready(function(){
            query();
        })
            
    function query(){
        var details = [];
        $.ajax({
            type:"GET",//请求方式
            url:"../json/details.json", //发送请求的地址
            async:true, //异步请求  如果需要发送同步 设置为false(同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行)
            data:{
                identityCard:$("#identityCard").val()
            },    //发送到服务器的数据
            dataType:"json",    //预期服务器返回的数据类型
            success:function(data){ //请求成功后的回调函数
                console.log(data);
                var identityCard = $("#identityCard").val(); //身份证id
                if(data instanceof Array){ //检验data是否为数组
                    for(var i = 0;i < data.length;i++){

                        details.push(data[i]); //向details数组添加数据  
                    }                            
                }
                        
                if(identityCard !== ""){
                    window.location.href = ".../searchDetails.html"; //跳转指定页面
       window.localStorage.setItem('details',JSON.stringify(details)) //localStorage存值
                }else{
                    console.log('身份证号码不能为空');
                }
            },
            error:function(){ //请求失败时调用此函数
                console.log('请求失败')
            }
        });
    }
            
                                                
    function reset(){
        $('#from input ').val("") //input框置空
        $('#from textarea ').val("")
    }

</script>

3.searchDetails取值页面代码：

<script type="text/javascript">

    $(document).ready(function(){
        getDetails();
    })
var div = document.getElementById('div')
    function getDetails(){
        var storage = window.localStorage;
        var json = storage.getItem('details'); //localStorage取值
        var userinfo = JSON.parse(json);
                
        var html = '';
        for(var i =0;i < userinfo.length;i++){
                    
            html += showDetails(userinfo[i])    
        }

        div.innerHTML = html;
    }
    function showDetails(item){
        var str = '';
        str += '<div class="title">'
        + '<span class="name">'+ item.name +'</span>'
        + '<span>'+ item.sex +'</span>'
        + '</div>'
        + '<div class="content"></div>';                    
        return str;
    }
            
</script>

原文地址：https://www.cnblogs.com/hungryC/p/12964316.html

上一篇：结合JSP与Servlet的项目开发实例

下一篇：如何在Linux中使用cp命令实现无提示覆盖或复制整个文件夹