jQuery对话框中的变量，通过ajax传递给php函数使用

Variable in jQuery dialog to be passed for use in php function via ajax

本文关键字：php 函数 ajax 对话框 变量 通过 jQuery      更新时间：2023-09-26

我觉得我已经接近了。我正在尝试使用ajax将变量从jquery传递到php函数。我已经包含了html和脚本。但我应该注意，"url:"中的php文件与编写该html代码和脚本的文件相同。php文件必须在脚本外部吗。或者，"url:"后面可以跟一个函数吗？或者这有关系吗？我想弄清楚我做错了什么。"alert（data）"会产生一个弹出窗口，里面什么都没有。现在我只是想把"success"分配给book_title。

<!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.css">
      <script src="//whosgotbooks.com/jquery/jquery-1.10.2.js"></script>
      <script src="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.js"></script>
      </head>
      <body>
      <div id="dialog" title="Google Books Search Results" style="display:none;">
  <script>
  $(function() { 
  $( "#dialog" ).dialog({
    height: 550, width: 450});
   $( ".btn" ).click(function(){
     $.ajax({
          type: "POST",
          url: 'book-search-google.php',
          data: { book_title: "success" },
            success: function(data)
            {
            alert(data);
            },
            error: function(errorThrown){
            alert('error');
            }
            });
   $( "#dialog" ).dialog( "close" ); 
   }); 
  });
  </script>

这是我希望传递变量"book_title"的代码。同样，此代码与html和脚本代码位于同一文件（图书搜索google.php）中。

$book_title = $_POST['book_title'];
echo "$book_title";

这是我有一个输入行的代码@Lokesh给了我一个很好的答案，但我现在认为重要的是要表明，我正在尝试根据用户选择jquery对话框窗口中每个结果旁边出现的10个"选择"按钮之一来传递变量：

<?php foreach ($data['items'] as $item) { ?>
        <?php for($i =1; $i <11; $i++) { ?>     
                  <tr>
            <td>
                       <strong><u><div style="font-size: 14px";><?php printf($item['volumeInfo']['title'])?></u></div></strong>
                         <strong>Author: </strong><?php printf( $item['volumeInfo']['authors'][0])?><br />
                         <strong>Published: </strong><?php printf( $item['volumeInfo']['publishedDate']); ?><br />                       
               <strong>Page(s): </strong><?php printf( $item['volumeInfo']['pageCount']); ?><br />
                         <strong>Publisher: </strong><?php printf( $item['volumeInfo']['publisher']); ?><br />
                         <strong>Category: </strong><?php printf( strtolower($item['volumeInfo']['printType']).', '.strtolower($item['volumeInfo']['categories'][0])); ?>&nbsp;&nbsp;
               <strong>ISBN: </strong><?php printf( $item['volumeInfo']['industryIdentifiers'][0]['identifier']); ?></td>
            <td><p><input type="submit" method="post" name="selectbook" value="Select" class="btn" id="returnvalues$i"/></p>
            <img src="<?php printf( rawurldecode($item['volumeInfo']['imageLinks']['smallThumbnail'])); ?>" />
                    </td>
            <tr><td style="width:420px"><p><strong>Description: </strong><?php printf( $item['volumeInfo']['description']); ?><br /></p></td>           
            </tr>
            </tr>

代码运行良好。。尝试通过浏览器控制台进行调试，而不是向原始html发出警报。若要处理干净的代码，您可以将服务器代码放在其他页面上，并将结果绑定到搜索框中。

  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.css">
  <script src="//whosgotbooks.com/jquery/jquery-1.10.2.js"></script>
  <script src="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.js"></script>
  </head>
  <body>
  <div id="dialog" title="Google Books Search Results" style="display:;">
    <input type="text" id="txtSrch"/>
    <input type="button" class="btn" value="SEARCH"/><br/>
      <?php
        if(isset($_POST['book_title']))
        {
          $book_title = $_POST['book_title'];
         //loop through dataset in you case
          for($i=1;$i<=10;$i++)
          {
                echo "Result Set $i<input type='submit' class='btn' value='Select'  id='select_$i'/><br/>";
          }
        }
      ?>
  <div> 
    <script>
     $(function() { 
         $( "#dialog" ).dialog({
           height: 550, width: 450});
           $( ".btn" ).click(function(){
              if(this.id.indexOf('select')>-1)
      {
        var id = (this.id.split("_"))[1];
        console.log(id);
      }
              else
              {
                    $.ajax({
                       type: "POST",
                       url: 'test.php',
                   async:true,
                       data: { book_title: $("#txtSrch").val() },
                       success: function(data)
                       {
                         console.log(data);
                         $("#dialog").html(data);
                        },
                        error: function(errorThrown){
                        alert('error');
                        }
                 });
        //$( "#dialog" ).dialog( "close" ); 
              }
          }); 
    });
</script>
相关文章：