Question

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

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

使用firebug网络标签我可以看到POST请求但是在post标签下没有数据。我一定是在javascript本身做错了，但对我来说它看起来还不错，我所有的谷歌搜索都没有提出一个有效的替代方案。

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

<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>

当错误通知标记就绪状态且状态均为0时，thrownerror只是错误。

此外，接收控制器目前只是一个要测试的print_r（＆amp; _POST）。

我似乎无法自己解决这个问题，如果有人能提供帮助，我们将非常感激。

由于

Answer 1

数据对象的键不应该用引号括起来。

当您将其更改为：

时，它应该可以工作（前提是jQuery调用值可以工作）

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

来源：jQuery.ajax() documentation

Answer 2

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

var error = false;

    if(error){
        return false;
    }

Answer 3

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

$('#currency_sel :selected').val()应该是 $('select[name="currency_sel"] option:selected').val()和其他人一样。

修改

删除数据的括号，它应该是

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() },

Answer 4

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

这是发生了什么..

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

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

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

要防止您在ajax调用后return false;或在事件对象上调用preventDefault()：

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

    e.preventDefault();

    /* Rest of the code */

});

这可以解决您的问题。

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

Answer 5

将Ben＆amp; amp; amp; amp; 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);
                        }            
                });                
        });
    });

jquery ajax调用中没有POST数据

5 个答案: