Question

这是我的预览问题的一个更清晰的代码，我的想法是使用ajax发送和检索一个值，但是没有发送值，也没有ajax工作。我更新了这段代码，因为这样可以在任何机器上轻松测试。第一次使用ajax。这是代码：

的Javascript

<script>
jQuery(document).ready(function() {
jQuery('#centro').click( function() {
$.ajax({
        url: 'request.php',
        type:'POST',
        data: $("#form").serialize(),
        dataType: 'json',
        success: function(output_string){
        alert(output_string);
                $('#cuentas').html(output_string);
            } // End of success function of ajax form
        }); // End of ajax call    

  });

});
</script>

HTML：

  <?php
  $result = 'works';
  ?>

  <form id="form">
  <div id="centro">
  <a href="#">Click here</a>
  <br>
  <input type="hidden" name="centro" value="<?php echo $result; ?>">
  </form>

  <div id="cuentas">
  </div>

PHP文件，request.php

 <?php
 $centro = $_POST['centro'];
 $output_string = ''.$centro;
 echo json_encode($output_string);
 ?>

Answer 1

尝试更改您的代码有点像下面。

Jquery部分

success: function(d){
         var output=d[0].data; // Will output only first record  
          $('#cuentas').html(output);
        } // End of success function of ajax form

PHP PART

$centro = $_POST['centro'];
$output_string = array('data'=>$centro);
echo json_encode($output_string);

如果仍无法正常工作请检查Chrome中的Developer tool或firefox中的firebug以监控请求

Answer 2

查看您的代码：

  <?php
  $result = 'works';
  ?>

  <form id="form">
  <div id="centro">
  <a href="#">Click here</a>
  <br>
  <input type="hidden" name="centro" value="<?php echo $result; ?>">
  </form>

  <div id="cuentas">
  </div>

我错过了div id =“centro”的结尾标记。因此，jQuery（“＃centro”）的click-event不会触发。

我认为它应该是这样的:(始终在div内部或之外设置<form>和</form>，不要混合并将<form>放在外面</form>当你做这样的混合时，有些东西不能按预期工作。

  <?php
  $result = 'works';
  ?>

  <div id="centro">
  <form id="form">
  <a href="#">Click here</a>
  <br>
  <input type="hidden" name="centro" value="<?php echo $result; ?>">
  </form>
  </div> ><!-- end of div centro -->

  <div id="cuentas">
  </div>

Answer 3

我解决了它，现在这个工作，加上我添加了一个gif加载器：

使用Javascript：

 <script>
 jQuery(document).ready(function() {
 jQuery('#centro').click( function() {
 var result = $("input#centro").val(); 
 $.ajax({
    url: 'request.php',
    type:'POST',
    data: { 'dataString': result },
    beforeSend: function(){
                   $("#loader").show();
               },
    success: function(output_string){
     $("#loader").hide();
           $('#cuentas').html(output_string);  
        } // End of success function of ajax form
    }); // End of ajax call    

  });

 });
 </script>

HTML

 <?php
 $result = 'works';
 ?>

 <form id="form">
 <div id="centro">
 <div id="loader" style="display:none"><img src="ajax-loader.gif" width="20px" height="20px"></div>
 <a href="#">Click here</a> 
 <br>
 <input type="hidden" name="centro" id="centro" value="<?php echo $result; ?>">
 </form>
<div id="cuentas">
</div>

PHP

 <?php
 $data = $_POST['dataString'];
 $output_string = '';
 $output_string = '<h3>'.$data.' '.'testing'.'</h3>';
 echo $output_string;
 ?>

输出：“工作测试”

使用ajax发送检索值的问题

3 个答案: