jquery ajax调用中没有POST数据

I've been trying to POST data back to a controller from a lightbox using ajax but of course it doesn't work.

我一直在尝试使用ajax从灯箱将数据发回到控制器,但当然它不起作用。

I have two select lists, both populated from the default controller. When I select a value and click the submit I have the error box briefly flash up the disappear again.

我有两个选择列表,都是从默认控制器填充的。当我选择一个值并单击提交时,我将错误框暂时闪烁再次消失。

Using the firebug network tab I can see the POST request however under the post tab there's no data. I must be doing something wrong in the javascript itself but to me it looks ok and all my googling didn't suggest an alternative that worked.

使用firebug网络选项卡我可以看到POST请求但是在post选项卡下没有数据。我必须在javascript本身做错事,但对我来说它看起来不错,我所有的谷歌搜索都没有提出一个有效的替代方案。

Here's my code...

这是我的代码......

<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">

<div id="ajax-login-register">

    <div id="login-box">
        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
        <form id="login-form">

        <select name="currency_sel" id="brand_country" class="form_select_200px">

            <option value="0" selected><i>Select your preferred Currancy</i></option>
                <?php foreach($currencies as $currency): ?>
                <option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
                <?php endforeach; ?>
            </select>
        </form>
  </div>

    <div id="register-box">

        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
        <form id="register-form">            

            <select name="language_sel_1" id="brand_country" class="form_select_200px">                 
            <option value="0" selected>Select your preferred Language</option>
                <?php foreach($languages as $language): ?>
                <option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
                <?php endforeach; ?>
            </select>

            <select name="language_sel_2" id="brand_country" class="form_select_200px">                 
            <option value="0" selected>Select your preferred Language</option>
                <?php foreach($regions as $region): ?>
                <option value="<?php echo $region['country_id']; ?>"><?php echo $region['country_name']; ?></option>
                <?php endforeach; ?>
            </select>

            <div class="line">&nbsp;</div>
        </form>

    </div> 
        <div>
            <form>
                <button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
            </form>
        </div>
</div>

</div>

<script type="text/javascript">

$(document).ready(function(){

$('#ajax-login-button').button({
    icons: {
        primary: "ui-icon-check"
    }
});

$('#ajax-submit-button').click(function(){

    var error = false;

    if(error){
        return false;
    } else {
        $.ajax({
            url: "<?=site_url('locale/set_ui_lang')?>",
            type: "POST",
            dataType: "json",              
            data: ({
                'currency_sel'      : $('#currency_sel :selected').val(),
                'language_sel_1'        : $('#language_sel_1 :selected').val(),
                'language_sel_2'        : $('#language_sel_2 :selected').val()
            }),
            success: function(data){
                    parent.$.colorbox.close();
                    parent.location.reload();
                },
            error: function(xhr, ajaxOptions, thrownError){
                 alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
                }            
            });                
        }
    });
});
</script>

</body>

When the error notice flags up the ready state and status both come up 0, thrownerror is just error.

当错误通知标记就绪状态并且状态都为0时,thrownerror只是错误。

Also the receiving controller is currently only just a print_r(&_POST) to test.

此外,接收控制器当前只是要测试的print_r(&_ POST)。

I don't seem to be able to get past this myself, if anyone can help it is much appreciated.

我似乎无法自己解决这个问题,如果有人能帮助它,我将不胜感激。

Thanks

5 个解决方案

#1

The keys of your data object should not be in quotes.

数据对象的键不应该在引号中。

It should work (provided the jQuery calls for the values work) when you change it to:

当你将它改为时,它应该工作(假设jQuery调用值工作):

data: {
    currency_sel: $('#currency_sel :selected').val(),
    language_sel_1: $('#language_sel_1 :selected').val(),
    language_sel_2: $('#language_sel_2 :selected').val()
},

Source: jQuery.ajax() documentation

来源:jQuery.ajax()文档

#2

Is it just me or are you making the click event return false instead of firing off AJAX?

它只是我还是你让点击事件返回false而不是解雇AJAX?

var error = false;

    if(error){
        return false;
    }

#3

Your ajax call is in a click handler for a button inside a separate form.

您的ajax调用位于单独表单内的按钮的单击处理程序中。

Here's what's happening..

这是发生了什么..

When you click the button, you trigger an ajax call.

单击该按钮时,将触发ajax调用。

The click handler then returns normally and the form that contains the button is submitted.

然后单击处理程序正常返回,并提交包含该按钮的表单。

When that happens a new page loads, and the browser cancels any pending ajax request, which triggers your error. (after you click ok in the error alert, you should notice a normal page load)

当发生这种情况时,会加载新页面,浏览器会取消任何待处理的ajax请求,从而触发您的错误。 (在错误警报中单击“确定”后,您应该注意到正常的页面加载)

To prevent that you can either return false; after your ajax call, or call preventDefault() on the event object:

为了防止你可以返回false;在你的ajax调用之后,或者在事件对象上调用preventDefault():

$('#ajax-submit-button').click(function(e){

    e.preventDefault();

    /* Rest of the code */

});

This should fix your problem.

这应该可以解决您的问题。

*Edit: * note the e parameter on the function definition

*编辑:*注意功能定义的e参数

#4

You can't multiple IDs with the same name and you selectors are wrong.

您不能使用相同名称的多个ID,并且您的选择器是错误的。

$('#currency_sel :selected').val() should be $('select[name="currency_sel"] option:selected').val() and same for the others.

$('#currency_sel:selected')。val()应该是$('select [name =“currency_sel”]选项:selected')。val()和其他的相同。

EDIT

Remove parenthesis of data, it should be

删除数据的括号,应该是

data: {
                currency_sel : $('select[name="currency_sel"] option:selected').val(),
                language_sel_1 : $('select[name="language_sel_1"] option:selected').val(),
                language_sel_2 : $('select[name="language_sel_2"] option:selected').val()
            },

#5

Fixed this in combination of Ben & L105. For anyone else with a similar problem here's the working code. div names etc are a bit sketchy, this is still a prototype build...

修复了Ben和L105的组合。对于其他有类似问题的人来说,这是工作代码。 div名称等有点粗略,这仍然是原型构建......

<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">

<div id="ajax-login-register">

    <div id="login-box">
        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
        <form id="login-form">

        <select name="currency_sel" id="currency_sel" class="form_select_200px">

            <option value="0" selected><i>Select your preferred Currancy</i></option>
                <?php foreach($currencies as $currency): ?>
                <option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
                <?php endforeach; ?>
            </select>
        </form>
  </div>

    <div id="register-box">

        <div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
        <form id="register-form">            

            <select name="language_sel_1" id="language_sel_1" class="form_select_200px">                    
            <option value="0" selected>Select your preferred Language</option>
                <?php foreach($languages as $language): ?>
                <option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
                <?php endforeach; ?>
            </select>


            <div class="line">&nbsp;</div>
        </form>

    </div> 
        <div>
            <form>
                <button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
            </form>
        </div>
</div>

</div>

<script type="text/javascript">
$(document).ready(function(){
    $('#ajax-login-button').button({
        icons: {
            primary: "ui-icon-check"
        }
    });

    $('#ajax-submit-button').click(function(e){
        e.preventDefault();
        $.ajax({
                url: "<?=site_url('locale/set_ui_lang')?>",
                type: "POST",
                dataType: "json",              
                data: {
                    currency_sel:$('select[name="currency_sel"] option:selected').val(),
                    language_sel_1:$('select[name="language_sel_1"] option:selected').val()
                },
                success: function(data){
                        parent.$.colorbox.close();
                        parent.location.reload();
                    },
                error: function(xhr, ajaxOptions, thrownError){
                     alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
                        }            
                });                
        });
    });

#1