【问题标题】:Using ajax to pass a jquery string to php使用ajax将jquery字符串传递给php
【发布时间】:2013-06-29 02:10:09
【问题描述】:

我已经为此工作了一段时间,并在这里找到了许多关于 SO 的线索,但还没有任何工作。我正在尝试以用户可以通过选择“添加新”选项添加的形式创建一个动态下拉列表,该选项会打开一个模式窗口,可以在其中键入新选项。我使用 jquery 来打开窗口并捕获输入和 ajax 以(希望)发布文本并在 php 中检索它。我在控制台上看到新选项是在 javascript 中捕获的,并且 ajax 会发布一个帖子,但帖子数组是空的。

我的代码都在视图中。选择“添加新”时,弹出模态窗口,以便输入文本。我想在不提交的情况下捕获视图中输入的文本并将其显示在更新的选项列表中。

                  <legend>Animal Info</legend>

                    <div class="control-group <?php if (form_error('animal_species')) { echo 'error'; } ?>">
                        <label class="control-label">Species</label>            
                        <div class="controls">

                            <?php                                                   # Add "Add New"
                            $options = $species + array('addnew' => 'Add New'); 
                            echo form_dropdown('animal_species', $options,
                                                set_value('animal_species', (isset($my_data->animal_species)) ? $my_data->animal_species: ''),
                                                'id = "animal_species"',
                                                'class', 'addnew');
                            echo form_error('animal_species', '<span class="help-inline">', '</span>');                                
                            ?> 

                        </div>
                    </div>                            
              <?php


                  if(isset($new_option))
                  {
                    $new_option = $_POST['new_option'];
                    $species = array($new_option => $new_option) + $species;
                    var_dump($new_option);
                  }

             ?>

  <script type="text/javascript">

      $('#upload_form option[value="addnew"]').click(function(){

          // Show modal window
          $('#add-new').modal('show');

          $('#add-new-submit').on('click', function(){

              // Get new option from text field
              var new_option = $('#add-new-text').val();
              console.log(new_option);

              $.ajax({
                    type: "POST",
                    url: "<?php echo site_url(); ?>main/upload_page",
                    data: {new_option:'new_option'}
                  }).fail(function (jqXHR, textStatus, errorThrown){
                        console.error("The following error occured: " + textStatus, errorThrown);
                  });

              $('#add-new').modal('toggle');                              

           });

      //}); 
      });                 

  </script>

  <!-- add-new field -->
  <div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="add-new-fieldLabel">Add New Field</h3>
      </div>
      <div class="modal-body">

          <p>Would you like to add a new item?</p>
          <input type="text" id="add-new-text" name="add-new" placeholder="Type the new option">

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button>
      </div>

 </div><!-- /add-new field -->

现在字符串 new_options 在控制台中被捕获,但在 php 中为 NULL,因此 ajax 出于某种原因没有发布。这是因为我正在尝试更新同一页面吗?

【问题讨论】:

    标签: php jquery ajax


    【解决方案1】:

    由于您将发布的值作为$_POST['new_option']..您需要在 ajax 中将数据对象作为 new_option 传递...

    试试这个

    ...
    $.ajax({
             type: "POST",                       
             url: "<?php echo site_url(); ?>main/upload_page",
             dataType: 'text',
             data:{'new_option':new_option},  //<---here                         
           });
           console.log(new_option);
    
    
    .....
    

    【讨论】:

      【解决方案2】:

      改成:

      $.ajax({
          type: "POST",                       
          url: "<?php echo site_url(); ?>main/upload_page",
          dataType: 'text',
          data: {new_option : 'new_option'}
      }).fail(function (jqXHR, textStatus, errorThrown){
          console.error("The following error occured: " + textStatus, errorThrown);
      });
      

      如果您能够通过以下方式访问它:

      $_POST['new_option'];
      

      在 PHP 中。
      如果没有键,则只需$new_option = $_POST; 即可获取字符串

      【讨论】:

      • 非常感谢您的回复。将 .fail 放在这里会处理 ReferenceError,但放一个键并没有帮助。 ajax 仍然没有将 new_option 发布到我的视图中。在我看来,我在 $_POST 处收到一个 php 通知“未定义索引:new_option”,但控制台显示已在 jQuery 端捕获了一个 new_option。然而,它显然没有被 ajax 发布。
      猜你喜欢
      • 1970-01-01
      • 2013-07-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多