首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >试图通过jQuery.post()将变量从输入电台传递给PHP

试图通过jQuery.post()将变量从输入电台传递给PHP
EN

Stack Overflow用户
提问于 2018-10-18 18:56:15
回答 3查看 64关注 0票数 0

我正在尝试加载由php代码创建的html表。表应该由依赖于无线电输入选择器中的变量的sql查询生成,但不知何故,我无法通过jQuery.post()传递该变量。我做了一个简单的版本,有同样的问题,所以我希望有人能帮助我:

test.php:

代码语言:javascript
代码运行次数:0
运行
复制
<html>
<head>
    <script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<script type="text/javascript">
    $(document).ready(function(){

        $("input[name$='selectOP']").on("change", function() {
            var op = $(this).val();
            $.post('ajax.php', {varphp: op});   
            $("#div1").load('ajax.php', function(){             
            });
        });

    });
</script>
<body>
    <label class="radio-inline"><input type="radio" value="110" name="selectOP" id="selectOP">110  </label>
    <label class="radio-inline"><input type="radio" value="115" name="selectOP" id="selectOP">115  </label>
    <div id="div1">
    </div>
</body>
</html>

ajax.php:

代码语言:javascript
代码运行次数:0
运行
复制
<?php
    $var= "Something";
    echo $var;
    //$varphp = $_POST['varphp'];
    //echo $varphp;
?>

因此,在ajax.php的最后两行注释之后,代码成功运行,var $var在div1中加载。但是,如果我取消对这些行的注释,显然代码会停止,div1上也不会加载任何内容。我做错了什么?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-10-18 19:05:25

在传递参数的地方调用$.post,然后调用不带参数的load。当然,调用'load‘时不能得到$_POST’‘varphp’,因为您没有传递这个变量。

你必须使用其中之一。你可以这么做:

代码语言:javascript
代码运行次数:0
运行
复制
$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' ); 

代码语言:javascript
代码运行次数:0
运行
复制
$("#div1").load('ajax.php', {varphp: op});

但不是两者兼有

因此,您的代码可以是

$(Document).ready(函数(){)

代码语言:javascript
代码运行次数:0
运行
复制
    $("input[name$='selectOP']").on("change", function() {
        var op = $(this).val();
        $.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' ); 
    });

});

$(Document).ready(函数(){)

代码语言:javascript
代码运行次数:0
运行
复制
    $("input[name$='selectOP']").on("change", function() {
        var op = $(this).val();
        $("#div1").load('ajax.php', {varphp: op}); 
    });

});
票数 0
EN

Stack Overflow用户

发布于 2018-10-18 19:02:02

代码语言:javascript
代码运行次数:0
运行
复制
$.post('ajax.php', {varphp: op});   
$("#div1").load('ajax.php', function(){             
$});

这两行实际上产生了两个单独的ajax请求,这意味着服务器将分别提取它们。只有第一个参数有POST参数,只有第二个参数设置DOM对象的内容。

试着做这样的事情:

代码语言:javascript
代码运行次数:0
运行
复制
$("#div1").load('ajax.php', {
  varphp: op
});
票数 0
EN

Stack Overflow用户

发布于 2018-10-18 19:40:57

我喜欢的一个好做法是使用AJAX /延迟承诺。您可以尝试将代码转换为以下代码:

代码语言:javascript
代码运行次数:0
运行
复制
$.ajax({
  type: 'post', // you can switch to GET, POST, etc.
  url: 'ajax.php',
  data: {varphp: op},
})
.done(function(data) {
  $('#div1').html(data);
})
.fail(function(data) {
  // if your code fails, you can see the errors here in the console
  console.log(data);
})
.always(function(data) {
  // do something every time
});

donefailalways回调函数中的代码将分别根据AJAX调用是否成功、失败或两者而运行。这样,您也可以轻松地对代码进行故障排除,特别是当AJAX调用错误结束时(查看fail函数)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52880772

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档