Question

我需要用javascript从html获取数据，然后发送到PHP，然后发送回javascript php代码的结果。

所以我四处搜索，但找不到代码在我的情况下工作。

当我尝试将数据发送到auth-req.php文件时，这是我的javascript代码

(function($){
$('#authModal').modal('show');

$('#auth-btn').click(function (e) {
    $.ajax({
        url: './libraries/auth-req.php',
        type: 'POST',
        data: { 'key' : $('#client-security-key').val() },
        success: function (data) {
            alert(data + ' Success');
        },
        error: function (data) {
            alert(data + ' Error');
        },
        complete: function () {
            alert(data + ' Complete');
        },
        cache: false,
        contentType: false,
        processData: false
    });
});
})(jQuery);

当我尝试使用从javascript文件发送的数据时，这是我的PHP代码

echo 'I can make the check of the security key ' . $_POST['key'];

我的html文件

<form class="form" method="post">
            <div class="modal fade" id="authModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 style="color: #fff !important" class="modal-title" id="myModalLabel">Authentication</h4>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-10 col-md-offset-1">
                                <div class="form-group col-md-12">
                                    <label for="client-security-key" class="control-label">Security key</label>
                                    <input type="text" id="client-security-key" name="client_security_key" class="form-control" required />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="button" class="btn btn-primary" id="auth-btn" value="Authenticate" />
                        </div>
                    </div>
                </div>
            </div>
        </form>

所以我需要用户输入id =“client-security-key”的数据我希望用javascript获取并发送到php文件进行一些操作。但是当我尝试发送时，请告诉我这条消息（错误）：

  注意： D：\ xampp \ htdocs \ Smart-Grow-Controller \ libraries \ auth-req.php 6 中的未定义索引：client_security_key >
  我可以检查安全密钥Success

我做错了什么？

Answer 1

您需要注释代码的两行 -

// contentType：false， // processData：false

(function($){
$('#authModal').modal('show');

$('#auth-btn').click(function (e) {
    $.ajax({
        url: './libraries/auth-req.php',
        type: 'POST',
        data: { 'key' : $('#client-security-key').val() },
        success: function (data) {
            alert(data + ' Success');
        },
        error: function (data) {
            alert(data + ' Error');
        },
        complete: function () {
            alert(data + ' Complete');
        },
        cache: false,
        //contentType: false,
        //processData: false
    });
});
})(jQuery);

我认为通过将这些标头设置为false服务器脚本无法处理数据。希望这会对你有所帮助。

Answer 2

您设置为contentType: false and processData: false。因此它发送未经处理的数据（发送DOMDocument）因此您需要在数据中创建新的FormData。

从

更改此行

data: { 'key' : $('#client-security-key').val() },

如下所示

data: new FormData($('form')[0]),

也称为帖子名称作为输入名称

echo 'I can make the check of the security key ' . $_POST['client_security_key'];

Answer 3

尝试以下操作，删除了一些代码以使其更清晰。我也阻止了表单提交。

<?php  
    // if key value has been posted to page
    if(isset($_POST['key'])){

        // if the key isnt blank echo key value is xxx
        if($_POST['key'] != ''){
            echo 'Key value is:' . $_POST['key'];
        }else{
            // key is blank, error
            echo "Error!";
        }
        exit;
    }
?>


<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

<form class="form" method="post">
    <div class="modal fade" id="authModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 style="color: #fff !important" class="modal-title" id="myModalLabel">Authentication</h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="form-group col-md-12">
                            <label for="client-security-key" class="control-label">Security key</label>
                            <input type="text" id="client-security-key" name="client_security_key" class="form-control" required />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-primary" id="auth-btn" value="Authenticate" />
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function($){

        $('#auth-btn').click(function (e) {

            $.ajax({
                type: 'POST',
                url: '/auth-req.php',
                data: 'key=' + $('#client-security-key').val(),

                success: function (result) {
                    alert(result);
                },
                error: function (data) {
                    alert(result);
                }
            });

            return false;
        });

        // prevent form submit on enter
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });

    });
</script>

Ajax JQuery将数据发送到php脚本

3 个答案: