链接Jquery移动页面。一个带有用户输入，另一个带有结果

本文介绍了链接Jquery移动页面。一个带有用户输入，另一个带有结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两页供用户输入一个巴士站ID。此巴士站ID解析一个实时API。和一个页面的结果。这些页面现在显示在单个页面上。我希望用户重定向到第二页。我厌倦了链接页面，但它不起作用。 ANY建议？

 <！DOCTYPE html>< html lang = en>< head>< title>< head>< title>< head name>> viewport"< meta>< meta charset =" scale = 1>< link rel =stylesheethref =css / custom.css/>< link rel =stylesheethref =css / theme.min.css/>< link rel =stylesheethref =css / jquery.mobile.icons.min.css/>< link rel =stylesheethref =https://code.jquery.com/mobile/1.4.5 /jquery.mobile.structure-1.4.5.min.css/>< script type =text / javascriptsrc =jquery-3.3.1.min.js>< / script>< / head>< body class =ui-mobile-viewport ui-overlay-a>< div data-role =page1> < div data-role =content> < div class =content-primary> < table cellpadding =5cellspacing =5align =centerwidth =100％> < TR> < td align =center>< h1>获取下一个总线详情< / h1>< / td> < / TR> < TR> < td align =center> < div class =ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all> < input data-type =searchplaceholder =Bus Stop Idid =bus_stop_idname =bus_stop_id> < a href =＃tabindex = -  1aria-hidden =trueclass =ui-input -clean ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui -input-clear-hiddentitle =清除文本>清除文本< / a> < / DIV> < input type =buttonvalue =Get Current Updateid =button_get_busstyle =background-color：#fff; padding：8px;>< / td> < / TR> < /表> < / DIV> < / div>< / div>< div data-role =pageid =page2> < div data-role =content> < div class =content-primary> < div id =resultDivstyle =display：none; padding-top：40px> < table cellpadding =5cellspacing =5align =centerwidth =50％style =border：solid 1px #fff;> < TR> < TD>&安培; NBSP;< / TD> < TD>&安培; NBSP;< / TD> < TD>&安培; NBSP;< / TD> < / TR> < TR> < TD><强肽从< /强> < / TD> < td> ;:< / td> < td>< span id =from>< / span> < / TD> < / TR> < TR> < TD><强>至< /强> < / TD> < td> ;:< / td> < td>< span id =to>< / span> < / TD> < / TR> < TR> < td>< strong> Arival日期时间< / strong> < / TD> < td> ;:< / td> < td>< span id =arival>< / span> < / TD> < / TR> < TR> < td>< strong>出发日期时间< / strong> < / TD> < td> ;:< / td> < td>< span id =departure>< / span> < / TD> < / TR> < TR> < TD>&安培; NBSP;< / TD> < TD>&安培; NBSP;< / TD> < TD>&安培; NBSP;< / TD> < / TR> < /表> < / DIV> < / DIV> < / div>< / div><！ -  pageone结束 - ><！ - 在页面底部加载脚本 - >< div class =ui-loader ui-corner -all ui-body -a ui-loader-default>< span class =ui-icon-loading>< / span> < h1>载入< / h1>< / div>< div class =ui-panel-dismiss>< / div>< script type =text / javascript> //点击按钮这个函数调用$（'＃button_get_bus'）。click（function（）{// Get Enter Bus Id var bus_stop_id = document.getElementById（bus_stop_id）.value; //如果Id为空然后给出错误，如果（bus_stop_id ==）{警报（请输入公共汽车站号码）;返回false;} //这个函数发布请求API与给定的巴士站ID $ .ajax（{url：https ：//data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation？stopid =+ bus_stop_id +& format = json，dataType：'json'，success：function（results）{//返回json数据控制台.log（results）; var str = JSON.stringify（results）; //解析json并在html中插入数据的代码var obj = jQuery.parseJSON（str）; var destination = obj.results [0] .destination; document .getElementById（to）。innerHTML = destination; var origin = obj.results [0] .origin; document.getElementById（from）。innerHTML = origin; var arrivaldatetime = obj.results [0] .arrivaldatetime; document .getElementById（ arival）。innerHTML的= arrivaldatetime ; var departuredatetime = obj.results [0] .departuredatetime;的document.getElementById（ 离开）的innerHTML = departuredatetime。的document.getElementById（ resultDiv）的style.display = 块。 }}）; 
 
 < / html>

<!DOCTYPE html> <html lang="en"> <head> <title>Dublin Concert Listings</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/custom.css" /> <link rel="stylesheet" href="css/theme.min.css" /> <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" /> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> </head> <body class="ui-mobile-viewport ui-overlay-a"> <div data-role="page1"> <div data-role="content"> <div class="content-primary"> <table cellpadding="5" cellspacing="5" align="center" width="100%"> <tr> <td align="center"><h1>Get Next Bus Details</h1></td> </tr> <tr> <td align="center"> <div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all"> <input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id"> <a href="#" tabindex="-1" aria-hidden="true" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a> </div> <input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td> </tr> </table> </div> </div> </div> <div data-role="page" id="page2"> <div data-role="content"> <div class="content-primary"> <div id="resultDiv" style="display:none; padding-top:40px"> <table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; "> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><strong>From</strong> </td> <td>: </td> <td><span id="from"></span> </td> </tr> <tr> <td><strong>To</strong> </td> <td>: </td> <td><span id="to"></span> </td> </tr> <tr> <td><strong>Arival Date Time</strong> </td> <td>: </td> <td><span id="arival"></span> </td> </tr> <tr> <td><strong>Departure Date Time</strong> </td> <td>: </td> <td><span id="departure"></span> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </div> </div> </div>   <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span> <h1>loading</h1> </div> <div class="ui-panel-dismiss"></div> <script type="text/javascript"> //On click of button this function get call $('#button_get_bus').click(function(){ //Get Enter Bus Id var bus_stop_id=document.getElementById("bus_stop_id").value; //If Id is blank then given error if(bus_stop_id=="") { alert("Please enter bus stop number"); return false; } // This Function post request to API with the given bus stop id $.ajax({ url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json", dataType: 'json', success: function(results){ // It returnes json data console.log(results); var str = JSON.stringify(results); // Code for parsing json and inserting data in html var obj =jQuery.parseJSON(str); var destination=obj.results[0].destination; document.getElementById("to").innerHTML=destination; var origin=obj.results[0].origin; document.getElementById("from").innerHTML=origin; var arrivaldatetime=obj.results[0].arrivaldatetime; document.getElementById("arival").innerHTML=arrivaldatetime; var departuredatetime=obj.results[0].departuredatetime; document.getElementById("departure").innerHTML=departuredatetime; document.getElementById("resultDiv").style.display="block"; } }); }); </script> </body> </html>

//On click of button this function get call $(document).on('click', '#button_get_bus', function() { //Get Enter Bus Id var bus_stop_id = document.getElementById("bus_stop_id").value; //If Id is blank then given error if (!bus_stop_id) { alert("Please enter bus stop number"); return false; } // This Function post request to API with the given bus stop id $.ajax({ url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid=" + bus_stop_id + "&format=json", dataType: 'json', success: function(results) { // It returnes json data console.log(results); var str = JSON.stringify(results); // Code for parsing json and inserting data in html var obj = jQuery.parseJSON(str); var destination = obj.results[0].destination; document.getElementById("to").innerHTML = destination; var origin = obj.results[0].origin; document.getElementById("from").innerHTML = origin; var arrivaldatetime = obj.results[0].arrivaldatetime; document.getElementById("arival").innerHTML = arrivaldatetime; var departuredatetime = obj.results[0].departuredatetime; document.getElementById("departure").innerHTML = departuredatetime; document.getElementById("resultDiv").style.display = "block"; $.mobile.pageContainer.pagecontainer("change", "#page2"); } }); });