将结果显示在有关ajax成功功能的另一页的划分中

Question

there are 4 different page. 有4个不同的页面。 product-listing.php ,product-single-page.php , product-lis.js and action.php. product-listing.php，product-single-page.php，product-lis.js和action.php。 when i am searching something in product-single-page.php,product-lis.js is receiving data, through ajax the keyword of the searchred item is sending to action.php and on Success it has to show result in the division which is having Id(get_product) of product-listing page. 当我在product-single-page.php中搜索某些内容时，product-lis.js正在接收数据，通过ajax searchred项目的关键字将发送到action.php，并且在成功时它必须在除法中显示结果具有产品列表页面的ID（get_product）。 but it is not show its result in product-listing page. 但它不会在产品列表页面中显示其结果。 i need to show search result in the product-listing page after clicking the search button. 单击搜索按钮后，我需要在产品列表页面中显示搜索结果。

Code 码

product-listing.php

<!DOCTYPE html>
<html>
  <head>
    <title></title>
       <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <script src="bootstrap/js/jquery.min.js" ></script>
       <script src="bootstrap/js/bootstrap.min.js" ></script>
       <script src="test.js" ></script>
  </head>
  <body>
     <div class="container">
         <div class="col-md-12">
             <div id="get_something"></div>
         </div>
     </div>
  </body>
</html>

product-single-page.php

<!DOCTYPE html>
<html>
    <head>
        <title></title>
            <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
           <link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
           <script src="bootstrap/js/jquery.min.js" ></script>
           <script src="bootstrap/js/bootstrap.min.js" ></script>
           <script src="test.js" ></script>
     </head>
     <body>
        <div class="col-md-12">
            <input type="text" placeholder="I'm looking for..." class="for-control"  name="name" id="name" autocomplete="off" value="">
            <button type="submit" class="btn btn-primary" id="search_btn" name="submit">GO</button>
        </div>
     </body>
</html>


product-lis.js

$(document).ready(function()
{
   $("body").delegate("#search_btn","click",function(event)
   {
     event.preventDefault();
     var keyword = $("#name").val();
     var id = $('#name').val();
     $.ajax({
     url: "action.php",
     method: "POST",
     data : { search : 1 , id : id},
     success:function(data)
        {
         $("#get_something").html(data);
        }
     })    
   });
 })


action.php`

<?php
 if(isset($_POST['search']))
 {
   $val=$_POST['id'];
  ?>
  <h1><?php  echo $val; ?></h1>
  <?php
}
?>

Answer 1

you dont have access div of another page directly 您没有直接访问另一个页面的div
because it have define in another page so its not access in same page you access another page div thats not possible 因为它已经在另一个页面中定义，所以它不能在同一页面中访问，您无法访问另一个页面div

but you can redirect to that page with your ajax response and set response data to particular div of different page 但是您可以使用ajax response重定向到该页面，并将响应数据设置为不同页面的特定div

try this one 试试这个

1)product-listing.php 1）产品listing.php

<?php
$data=@$_REQUEST['data'];

?>

<!DOCTYPE html>
<html>
  <head>
    <title></title>
       <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <script src="bootstrap/js/jquery.min.js" ></script>
       <script src="bootstrap/js/bootstrap.min.js" ></script>
       <script src="test.js" ></script>
  </head>
  <body>
     <div class="container">
         <div class="col-md-12">
             <div id="get_something"><?=$data?></div>
         </div>
     </div>
  </body>
</html>

2)product-single-page.php 2）产品单page.php文件

<!DOCTYPE html>
<html>
    <head>
        <title></title>
            <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
           <link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
           <script src="bootstrap/js/jquery.min.js" ></script>
           <script src="bootstrap/js/bootstrap.min.js" ></script>
           <script src="test.js" ></script>
     </head>
     <body>
        <div class="col-md-12">
            <input type="text" placeholder="I'm looking for..." class="for-control"  name="name" id="name" autocomplete="off" value="">
            <button type="submit" class="btn btn-primary" id="search_btn" name="submit">GO</button>
        </div>
     </body>
</html>

<script type="text/javascript" src="../../library/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function()
{
   $("body").delegate("#search_btn","click",function(event)
   {
     event.preventDefault();
     var id = $('#name').val();
     $.ajax({
     url: "action.php",
     method: "POST",
     data : { search : 1 , id : id},
     success:function(data)
        {
             location.href="product-listing.php?data="+data;
        }
     });    
   });
 })

</script>

3)action.php 3）action.php的

<?php
 if(isset($_POST['search']))
 {
   $val=$_POST['id'];
  ?>
  <h1><?php  echo $val; ?></h1>
  <?php
}
?>

将结果显示在有关ajax成功功能的另一页的划分中

问题描述

1 个解决方案

解决方案1
0 2017-06-16 12:09:24

将结果显示在有关ajax成功功能的另一页的划分中

问题描述

1 个解决方案

解决方案1 0 2017-06-16 12:09:24

解决方案1
0 2017-06-16 12:09:24