[英]Simple Ajax/Codeigniter request
I'm having some issues with ajax and codeigniter. 我在Ajax和Codeigniter方面遇到一些问题。 I've already posted another question ( link to question ) and I thought I solved it, but I did not so I`m asking someone to write simple code with ajax/codeigniter that will increase number inside div/span on click.
我已经发布了另一个问题( 指向问题的链接 ),并且我认为我已解决了问题,但是我没有这样做,我想让某人使用ajax / codeigniter编写简单的代码,从而增加点击时div / span中的数量。
I`m trying last few days to do this, but constantly getting errors..My CI setting are : 我正在尝试最近几天来执行此操作,但是不断出错。我的CI设置是:
base_url : localhost/test/
base_url:
localhost/test/
index:index.php 索引:index.php
autoload:url 自动加载:网址
default controller:welcome (I left it so just for this test) 默认控制器:欢迎(我为进行此测试而保留了它)
I would be more than happy to have simple example to do this. 我将很高兴有一个简单的例子来做到这一点。 I tried also, again, but without any luck.
我也尝试过一次,但是没有任何运气。 Here's what I tried this time :
这是我这次尝试的方法:
Controller (welcome.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) 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);
}
});
}
View (HTML/CSS) 查看(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>
I'm using latest xampp on windows 7. Error that I get when I click on span - POST http://localhost/test/localhost/test/welcome/increase 404 (Not Found)
我在Windows 7上使用最新的xampp。单击跨度时出现错误
POST http://localhost/test/localhost/test/welcome/increase 404 (Not Found)
You must submit the CSRF token from cookies otherwise the request will be invalid, if you have CSRF enabled in config.php. 您必须从cookie提交CSRF令牌,否则,如果在config.php中启用了CSRF,则请求将无效。
You can use this plugin to retrieve cookies in javascript. 您可以使用此插件来检索JavaScript中的Cookie。 And simply pass it to CI.
只需将其传递给CI。
ci_token
ci_token
and 和
ci_cookie
ci_cookie
keys may be different and can be found in config.php 密钥可能不同,可以在config.php中找到
I would also suggest setting up a route for the request and using 我还建议为请求设置一条路线并使用
site_url()
site_url()
over 过度
base_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,
});
use site_url()
of codeigniter 使用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);
}
});
} }
however, adding http://
in front of localhost should work 但是,在本地主机前面添加
http://
应该可以
url: 'http://localhost/test/welcome/increase',
but it is always better and recommended to use site_url()
if you are calling a controller in CI...so that this won't give you errors while when you upload it to live server. 但是最好还是建议使用
site_url()
如果您正在CI中调用控制器),这样在将其上载到实时服务器时不会出现错误。
In your ajax, don't use external link for your JS just use internal. 在您的ajax中,请勿为JS使用外部链接,而应使用内部链接。
Make sure that you set your $config['base_url'] = http://localhost/test/
in config.php 确保在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);
}
});
}
<!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>
First You should define your site base_url in application/config file then use this base_url with your ajax page call from where your call goes. 首先,您应该在application / config文件中定义站点base_url,然后将此base_url与调用所在的ajax页面调用一起使用。 Suppose your
base_url
is http://localhost/test/
假设您的
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);
});
}
then change your increase function in controller like this 然后像这样更改控制器中的增加功能
function increase(){
$increase = $_POST['number'];
echo increase++;
} }
try this : 尝试这个 :
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);
}
});
}
If you are using this ajax in a .php file than you should do something like this to your url: 如果您在.php文件中使用此Ajax,则应该对网址执行以下操作:
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);
}
});
}
OR if you are doing this in a .js file than you need to add this line inside your head tag 或者,如果您要在.js文件中执行此操作,则需要在head标签内添加此行
<script> var base_url = "<?php echo base_url();?>";</script>
And than use this : 并且比使用这个:
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);
}
});
}
Hope that it resolves the problem. 希望它能解决问题。 However, its always a good idea when developing in the local environment to set the base_url in config.php like this :
但是,当在本地环境中进行开发时,像这样在config.php中设置base_url始终是一个好主意:
$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url'] = $root;
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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.