简单的 Ajax/Codeigniter 请求答案

【问题标题】：Simple Ajax/Codeigniter request简单的 Ajax/Codeigniter 请求
【发布时间】：2017-02-26 17:51:27
【问题描述】：

我在使用 ajax 和 codeigniter 时遇到了一些问题。我已经发布了另一个问题 (link to question)，我以为我解决了它，但我没有，所以我要求某人使用 ajax/codeigniter 编写简单的代码，这将在点击时增加 div/span 内的数字。

我最近几天正在尝试这样做，但不断出错..我的 CI 设置是：
base_url ：localhost/test/
索引：index.php
自动加载：网址
默认控制器：欢迎（我只是为了这个测试而留下它）

我很乐意有一个简单的例子来做到这一点。我也试过了，再次，但没有任何运气。这是我这次尝试的：

控制器（welcome.php）

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {


function __construct()
    {
        parent::__construct();
    }

public function index()
{
    $this->load->view('welcome_message');
}

function increase(){
    $increase = $this->input->post('increase');
    echo increase++;
}
}

JS (Ajax)

function increase(){
var number = parseInt($('#number').html()) + 1;
$.ajax({
        type: 'POST',
        url: 'localhost/test/welcome/increase',
        data: { increase:number },
        success:function(response){
            $('#number').html(response);
        }
});

}

视图 (HTML/CSS)

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery_v1.9.1.js"> </script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js">            </script>
<style type="text/css">
#number {
display: block;
text-align: center;
width: 100px;
height: 30px;
margin: auto auto;
line-height: 30px;
border: 1px solid #999999;
border-radius: 5px;
}

</style>
</head>
<body>
    <span id="number" onclick="increase()">0</span>
</body>
</html>

我在 Windows 7 上使用最新的 xampp。单击 span 时出现错误 - POST http://localhost/test/localhost/test/welcome/increase 404 (Not Found)

【问题讨论】：

除非您在谈论 FIX 协议，否则不要使用“修复”标签。

标签： javascript ajax codeigniter onclick

【解决方案1】：

如果您在 config.php 中启用了 CSRF，您必须从 cookie 提交 CSRF 令牌，否则请求将无效。

您可以使用此plugin 检索 javascript 中的 cookie。只需将其传递给 CI。

ci_token

和

ci_cookie

键可能不同，可以找到在config.php中

我还建议为请求设置路由并使用

site_url()

超过

base_url()

var SITE = "<?php echo site_url();?>" // GLOBAL variable so your javascripts can be external

-

var data = { 'ci_token' : $.cookies.get('ci_cookie'), 'increase' : parseInt(number)}
$.ajax({
    url : SITE + "/link/to/controller/method",
    data : data,
});

【讨论】：

不，我不必做这些。我所要做的就是证明 ajax url 中的完整路径。我相信它与 xampp 有一些关系。

【解决方案2】：

使用codeigniter的site_url()

 function increase(){
   var number = parseInt($('#number').html()) + 1;  
   $.ajax({
     type: 'POST',
     url: '<?php echo site_url("welcome/increase")?>',
     data: { increse:number }, //<--- here should be increase
     success:function(response){
        $('#number').html(response);
     }
  });

}

但是，在 localhost 前面添加 http:// 应该可以工作

 url: 'http://localhost/test/welcome/increase',

但如果您在 CI 中调用控制器，建议使用site_url() 总是更好，这样在您将其上传到实时服务器时不会出现错误。

【讨论】：

是 site_url 还是 base_url？我认为这是 base_url .. 我得到的错误：POST localhost/test/%3C?php%20echo%20base_url(%22welcome/… 403 (Forbidden)
base_url() 返回与 site_url 相同的内容，但不附加 index_page 或 url_suffix。
现在我收到此错误（如果我输入完整路径）：POST localhost/test/welcome/increse 404 (Not Found)
你在声明函数时忘记了 public public function increse(){
您现在遇到了错误.. 因为您在 ajax 中将函数名称拼写为 wearg...increase 为 increse...:) :)

【解决方案3】：

在你的 ajax 中，不要为你的 JS 使用外部链接，只使用内部链接。

确保您在 config.php 中设置了 $config['base_url'] = http://localhost/test/

function increase(){
    var number = parseInt($('#number').html()) + 1;
    $.ajax({
        type: 'POST',
        url: '<?php echo base_url()?>welcome/increase',
        data: { increase:number },
        success:function(response){
           $('#number').html(response);
        }
   });

}

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery_v1.9.1.js"> </script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js">            </script>
<style type="text/css">
  #number {
    display: block;
    text-align: center;
    width: 100px;
    height: 30px;
    margin: auto auto;
    line-height: 30px;
    border: 1px solid #999999;
    border-radius: 5px;
  }

</style>
</head>
<script>
function increase(){
  var number = parseInt($('#number').html()) + 1;
  $.ajax({
      type: 'POST',
      url: '<?php echo base_url()?>welcome/increase',
      data: { increase:number },
      success:function(response){
         $('#number').html(response);
      }
  });

}
</script>
<body>
<span id="number" onclick="increase()">0</span>
</body>
</html>

【讨论】：

【解决方案5】：

首先，您应该在 application/config 文件中定义您的站点 base_url，然后将此 base_url 与您的 ajax 页面调用一起使用。假设您的 base_url 是 http://localhost/test/

function increase(){
   var number = parseInt($('#number').html()) + 1;
   $.post('<?php echo base_url()?>welcome/increase',{number :number},function(response){
          $('#number').html(response);
   });    
}

然后像这样在控制器中更改您的增加功能

function increase(){
   $increase = $_POST['number'];
echo increase++;

}

【讨论】：

【解决方案6】：

试试这个：

function increase(){
        var number = parseInt($('#number').html()) + 1;
        $.ajax({
            type: 'POST',
            url: 'localhost/test/Welcome/increase/',
            data: "increase=" + number,
            dataType: "text",
            success:function(response){
                $('#number').html(response);
            }
        });

 }

【讨论】：

【解决方案7】：

如果你在 .php 文件中使用这个 ajax，那么你应该对你的 url 做这样的事情：

function increase(){
var number = parseInt($('#number').html()) + 1;
var base_url = "<?php echo base_url();?>";
$.ajax({
    type: 'POST',
    url: base_url+'welcome/increase',
    data: { increase:number },
    success:function(response){
        $('#number').html(response);
    }
  });
}

或者，如果您在 .js 文件中执行此操作，则需要在 head 标签内添加此行

<script> var base_url = "<?php echo base_url();?>";</script>

比使用这个：

function increase(){
var number = parseInt($('#number').html()) + 1;
$.ajax({
    type: 'POST',
    url: base_url+'welcome/increase',
    data: { increase:number },
    success:function(response){
        $('#number').html(response);
    }
  });
}

希望它能解决问题。但是，在本地环境中开发时，像这样在 config.php 中设置 base_url 总是一个好主意：

$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url']    = $root;

【讨论】：

【解决方案8】：

View::::::    
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="<?php echo base_url();?>css/jquery.js"> </script>
<style type="text/css">
#number {
display: block;
text-align: center;
width: 100px;
height: 30px;
margin: 50px auto;
line-height: 30px;
border: 1px solid #999;
border-radius: 5px;
}
body{
cursor: default;
}
</style>
</head>
<script>
function increase(){
var number = parseInt($('#number').html());
$.ajax({
  type: 'POST',
  url: '<?php echo base_url()?>main/samp_data',
  data: { increase:number },
  success:function(response){
     $('#number').html(response);
  }
  });
 }
</script>
<body>
<span id="number" onclick="increase()">0</span>
</body>
</html>




Controller::::::
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Main extends CI_Controller {

    public function index(){
        $this -> load -> view('sample_view');
    }

    public function samp_data(){
        $increase = $this->input->post('increase');
        echo ++$increase;
    }
}

【讨论】：