Question

我正在创建一个总线查找器应用程序。我希望用户在获得ajax api请求的输入信息后重定向到新页面。此信息在第一页之后但在同一页面上插入。一旦用户输入信息并发送请求，如何使用ajax结果创建新页面。我有一个变量用结果作为虚拟页面创建。

＆＃13;

<!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>


<div data-role="page" id="pageone">

  <div data-role="header">
    <h1>Get Next Bus Details</h1>
  </div>

      <div data-role="content">
        <div class="content-primary">
          <div data-demo-html="true">

            <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">
            </div>

            <input type="button" value="Get Current Update" id="button_get_bus">

      </div>
    </div>  
  </div>
</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
		var str = JSON.stringify(results);  

		// Code for parsing json 
		var myObj = JSON.parse(str);

		var destination = myObj.results[0].destination;
		var origin = myObj.results[0].origin;
		var arrivaldatetime = myObj.results[0].arrivaldatetime;	
		var departuredatetime =     myObj.results[0].departuredatetime;
    var routenumber = myObj.results[0].route

    var virtualPage = "";

    virtualPage += 
    '<div data-role="page" data-theme="a" id="virtualPage">' 
    + '<div data-role="header">' 
    + '<h1>' + origin + '</h1>' 
    + '<div data-role="content">' 
    + '<h3>Venue: '  + destination + '</h3>' 
    + '<h3>Date: ' + arrivaldatetime + '</h3>' 
    + '<h3>Time: ' + departuredatetime + '</h3>' 
    + '</div' 
    + '<div class="wrapper"><a data-role="button" data-transition="slide" href="#pageone">Back</a></div>' 
    + '</div>'
    + '</div>';

     $(virtualPage).insertAfter($('#pageone'));

		}
       
		});
	});

</script>
</body>
</html>

＆＃13;

在AJAX请求之前

在AJAX请求之后

来自用户输入ajax请求的新页面链接

0 个答案: