的Javascript

<script type="text/javascript"> 
    $(document).ready(function (){
        $('#recipeName').change(function (){
            var recId = $(this).val(); 
            console.log(recId);

            $.ajax({
                url: "<?php echo base_url(); ?>" + "index.php/MainController/recipeDetails",
                async: false,
                type: "POST",
                data: "name="+recId,
                dataType: "json",

                success:(function(data) {
                    $('#makes').val(data[0]);
                    $('#type').val(data[1]);
                    console.log(data);
                })
            })
        });

        $('#resourceName').change(function (){
            var resId = $(this).val(); 
            console.log(resId);
            $.ajax({
                url: "<?php echo base_url(); ?>" + "index.php/MainController/resourceDetails",
                async: false,
                type: "POST",
                data: "resource="+resId,
                dataType: "json",

                success:(function(data) {
                    $('#rate').val(data[0]);
                    $('#per').val(data[1]);
                    console.log(data);})
                })
            });
        });
</script>

HTML

<select name="resourceName" id="resourceName" required>
    <option>Choose a resource</option>
    <?php if($resources != null){
        foreach($resources as $res){ ?>
        <option><?php echo $res->resource;?></option>
    <?php }}?>
</select>

我的控制器代码如下。我甚至试图回应一些东西，看看值是否传递给控制器，但它没有回应任何东西。

public function resourceDetails() {
    $resource = $_POST['resource'];
    echo $resource . ' soe';
    $result = $this->MainModel->resourceDetails(trim($resource));
    if(isset($result)) {
        $rate = $result->rate;
        $per = $result->per;
        $values = array();
        $values[0] = $rate;
        $values[1] = $per;
        echo json_encode($values);
    }
}

Answer 1

你正在努力让自己变得困难，而不是正确地做一些事情。从您创建网址的方式到实施成功功能的方式，以及发布数据的方式，您的工作太辛苦了。您也没有尝试捕获错误，并假设数据始终存在。请考虑一下：

$(document).ready(function(){

    $(document).on('change', '#recipeName', function (){
        var recId = $(this).val(); 
        $.ajax({
            url: "<?php echo site_url('MainController/recipeDetails'); ?>",
            type: "POST",
            data: {
                'name': recId
            },
            dataType: "json",
            success: function(data) {
                if( data.makes && data.type ){
                    $('#makes').val(data.makes);
                    $('#type').val(data.type);
                }else{
                    alert('No makes or type');
                }
            },
            error: function(){
                alert('Problem with ajax 1');
            }
        })
    });

    $(document).on('change', '#resourceName', function (){
        var resId = $(this).val(); 
        $.ajax({
            url: "<?php echo site_url('MainController/resourceDetails'); ?>",
            type: "POST",
            data: {
                'resource': resId
            },
            dataType: "json",
            success: function(data) {
                if( data.rate && data.per ){
                    $('#rate').val(data.rate);
                    $('#per').val(data.per);
                }else{
                    alert('No rate or per');
                }
            },
            error: function(){
                alert('Problem with ajax 2');
            }
        });
    });

});

在MainController / recipeDetails中，您可以并且应该传回命名元素：

echo json_encode(array(
    'makes' => '123',
    'type'  => '567'
));

在MainController / resourceDetails中，您可以并且应该传回命名元素：

echo json_encode(array(
    'rate' => '987',
    'per'  => '654'
));

此外，在您的控制器中，您似乎总是会有$结果集。检查它是否为空可能更好，但这取决于MainModel中的resourceDetails方法。

我实际上无法测试此代码，因为我没有您的数据库或数据。如果有帮助，或者您需要其他帮助，请告诉我。

Answer 2

尝试此操作并跟踪

脚本

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#recipeName').change(function () {
      var recId = $(this).val();
      console.log(recId);

      $.ajax({
        url: "<?php echo base_url(); ?>" + "index.php/MainController/recipeDetails",
        type: "POST",
        data: "name=" + recId,
        dataType: "json",

        success: (function (data) {
          $('#makes').html(data[0]);
          $('#type').html(data[1]);
          console.log(data);
        })
      })
    });

    $('#resourceName').change(function () {
      var resId = $(this).val();
      console.log(resId);
      $.ajax({
        url: "<?php echo base_url(); ?>" + "index.php/MainController/resourceDetails",
        type: "POST",
        data: "resource=" + resId,
        dataType: "json",

        success: (function (data) {
          $('#rate').html(data[0]);
          $('#per').html(data[1]);
          console.log(data);
        })
      })
    });
  });
</script>

HTML

recipeName:<select name="recipeName" id="recipeName" required>
      <option>Choose a resource</option>
      <option value="1">test 1</option>
      <option value="1">test 2</option>
      <option value="1">test 3</option>
    </select>
    <br>
   resourceName: <select name="resourceName" id="resourceName" required>
      <option>Choose a resource</option>
      <option value="1">test 1</option>
      <option value="1">test 2</option>
      <option value="1">test 3</option>
    </select>
  <br>
  <label id="makes">make : 1</label>
  <label id="type">2</label>
  <label id="rate">3</label>
  <label id="per">4</label>

控制器

public function recipeDetails() {
    echo json_encode(array(array("vijay"), array("sharma")));
    exit(0);
  }

  public function resourceDetails() {
    echo json_encode(array(array("ram"),array("sita")));
    exit(0);
  }

根据您的要求更改functions

Answer 3

我尝试了所有发布的建议和代码，但它们没有用。我检查了我的代码并意识到我正在回应我的控制器和模型中的一些语句，只是为了测试函数是否正在执行。那些回声干扰了我的echo json_encode($values);所以我的成功函数没有返回任何值。一旦我删除了其他测试回声，我的功能就按预期工作了。

Codeigniter第二个ajax呼叫无法正常工作

的Javascript

HTML

3 个答案: