ajax请求数据 + localStorage传值

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()" id="begin">开始查询</button>
        　　<button type="button" onclick="reset()">重置</button>
        </div>
    </form>
            
</div>

 

2.search页面 js 代码：

 

<script type="text/javascript">
            
    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++){
                            while(identityCard == data[i].identityCard){
                                details.push(data[i]);    //向details数组添加数据  
                                break;
                            }    
                        }                            
                    }
                    window.localStorage.setItem('details',JSON.stringify(details)) //localStorage存值
                    console.log(details)
                    console.log(typeof(details))
                        
                },
                error:function(){ //请求失败时调用此函数
                    console.log('请求失败')
                }
            });
        }
        $('#begin').click(function(){
            window.location.href = '/searchDetails.html'    
        })            
        function reset(){
            $('#from input ').val("") //input框置空
            $('#from textarea ').val("")
        }
</script>

 

 

 

 

3.searchDetails页面 html 代码：

<div  id="div">
    <div class="title">
        <span class="name">老王</span>
        <span>男</span>
    </div>
    <div class="content"></div>
</div>

 

4.searchDetails页面 js 代码：

<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>