Javascript 使用Ajax将JS变量传递给PHP的方法？_Javascript_Php_Ajax_Codeigniter

Javascript 使用Ajax将JS变量传递给PHP的方法？

javascript php ajax codeigniter

Javascript 使用Ajax将JS变量传递给PHP的方法？,javascript,php,ajax,codeigniter,Javascript,Php,Ajax,Codeigniter,我有一个codeigniter应用程序插入wordpress网站。我需要根据视图中的html选择选项值修改php中的短代码。短代码将表单添加到我的html页面。我认为我需要使用Ajax将数据从JS移动到PHP。我对如何完成这件事感到困惑。这是必须完成的基本顺序（不包括Ajax或任何其他需要的方法）：在我看来，我需要以下组件： <html> <select id="select-service"> <option value="volvo">

我有一个codeigniter应用程序插入wordpress网站。我需要根据视图中的html选择选项值修改php中的短代码。短代码将表单添加到我的html页面。我认为我需要使用Ajax将数据从JS移动到PHP。我对如何完成这件事感到困惑。这是必须完成的基本顺序（不包括Ajax或任何其他需要的方法）：

在我看来，我需要以下组件：

<html>
    <select id="select-service">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>

//This is where I am putting the short code I made in JS
<?php echo do_shortcode("shortCode GOES HERE"); ?>

</html>
<script>
    function getService() {
        var serviceItem = $('#select-service option:selected').text();
        shortCode = "[wpi_checkout item='" + serviceItem + "']" ;
        //AN AJAX SEQUENCE HERE?
        var postUrl = GlobalVariables.baseUrl + '/ajax_serviceitem'; 
        $.ajax({
            url: postUrl,
            method: 'post',
            data: shortCode,
            success: function(data) {
                alert(data);
            }
        });
    }
    $(document).ready(getService);
    $('select').on('change', getService);
</script>

我是走对了路还是把事情复杂化了

function getService() {
        var serviceItem = $('#select-service option:selected').val();
        data = {'shortCode':serviceItem};
        //AN AJAX SEQUENCE HERE?
        var postUrl = GlobalVariables.baseUrl + '/ajax_serviceitem'; 
        $.ajax({
            url: postUrl,
            type: "POST",
            dataType: 'json',
            data : data,
            success: function(data) {
                alert(data);
            }
        });
    }

====================================我看到的另一个修复是==================

public function ajax_serviceitem() {
    $shortcode = $_POST['shortCode']
    $this->load->view('myview', $shortcode);
    //I am lost as to what to do next 
}

您可以针对您的问题尝试以下解决方案：

JS:

function getService() {
    var serviceItem = $('#select-service option:selected').val();
    data = {'shortCode':serviceItem};
    //AN AJAX SEQUENCE HERE?
    var postUrl = GlobalVariables.baseUrl + '/ajax_serviceitem'; 
    $.ajax({
        url: postUrl,
        type: "POST",
        dataType: 'json',
        data : data,
        success: function(response) {
            if (response.status == 'success') {
                console.log("Success Request");
                $("#view_selector").html(response.my_view_file);
            } else {
                console.log("Fail Request");
            }
        }
    });
}

public function ajax_serviceitem() {
    if ($this->input->is_ajax_request()) {
        $shortcode =  $this->input->post('shortCode');
        if (!empty($shortcode)) {
            $my_view_file = $this->load->view('myview', $shortcode, TRUE);
            $data['status'] = 'success';
            $data['my_view_file'] = $my_view_file;
        } else {
            $data['status'] = 'error';
            $data['my_view_file'] = "";
        }
        echo json_encode($data);
        exit;
    } else {
        redirect('login/logout'); // Logout URL here
    }
}

PHP:

function getService() {
    var serviceItem = $('#select-service option:selected').val();
    data = {'shortCode':serviceItem};
    //AN AJAX SEQUENCE HERE?
    var postUrl = GlobalVariables.baseUrl + '/ajax_serviceitem'; 
    $.ajax({
        url: postUrl,
        type: "POST",
        dataType: 'json',
        data : data,
        success: function(response) {
            if (response.status == 'success') {
                console.log("Success Request");
                $("#view_selector").html(response.my_view_file);
            } else {
                console.log("Fail Request");
            }
        }
    });
}

public function ajax_serviceitem() {
    if ($this->input->is_ajax_request()) {
        $shortcode =  $this->input->post('shortCode');
        if (!empty($shortcode)) {
            $my_view_file = $this->load->view('myview', $shortcode, TRUE);
            $data['status'] = 'success';
            $data['my_view_file'] = $my_view_file;
        } else {
            $data['status'] = 'error';
            $data['my_view_file'] = "";
        }
        echo json_encode($data);
        exit;
    } else {
        redirect('login/logout'); // Logout URL here
    }
}

我希望它会有所帮助。

这里的问题是，尽管php工作是在服务器上完成的，但返回的变量是JS，因此它不会工作。我通过在视图中添加一些php来收集视图中的选项并从中生成短代码，从而解决了我的问题：

//First: In css I hid all the elements that the short code produces


//This select box is built by a foreach routine in my controller.
<html>
    <select id="select-service">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>

//This is where I am putting the short code.  I am grabbing $service['id'] from my database in my controller and sending it to the view. I am building a bunch of divs that reflect the values of the select options here rather than in the controller.  I have to do this because the wordpress do_shortcode() hook will only work in the view.
<?php foreach($available_services as $service) { 
    $shortcode = "[wpi_checkout item='" . $service['id'] "' title ='session_ID' callback_function='ea_paypalcallback']"; ?>
    <div id="<?php echo $service['id'] ?>" class="shortcode"><?php echo do_shortcode($shortcode)?></div>
<?php } ?>  

</html>

成功了。

你试过了吗？-您可能需要

shortCode={“shortCode”：serviceItem}NikuNj--谢谢，我正在尝试这个方法，我没有收到任何错误，但是我在
中很难将短代码拉回来。我不知道如何把它拉回来。我试过
，但不起作用。也就是说，我返回空。@craig我不理解do\u short\u code函数，所以请解释更多。谢谢。do\u shortcode（）
函数在Wordpress中用于在除Wordpress页面以外的页面（如插件）中运行Wordpress短代码。短代码的格式为[wpi\u checkout item='Volvo']
我正在用JS构建短代码，并将其发送到PHP，以便在do\u shortcode（）函数中使用。因此，我需要返回$shortcode变量中的shortcode，例如do\u shortcode（“$shortcode”）
。