Ajax:如何在提交时传递表单数据和凭据?

时间:2020-11-10 05:37:01

标签: javascript php jquery ajax form-data

主要问题:- Ajax:如何在提交时同时传递表单数据和凭据?

我具有以下功能,当用户单击“提交”按钮时会调用该功能:

<script type="text/javascript">
function submitForm() {
    console.log("submit event");
    var fd = new FormData(document.getElementById("campaign_form"));
    console.log(fd);
    var username = $('#username').val();
    console.log(username);
    var password = $('#password').val();
    console.log(password);
    $.ajax({
        type: "POST",
        url: "http://localhost/testing/post_campaigns.php",
        data: fd,
        data: {
            "username": $('#username').val(), 
            "password": $('#password').val()
        },
    });
    return false;
}
</script>

我的php URL被正确调用,但是我看不到我的数据被传递。

例如,我通常希望能在开发人员工具中看到

http://localhost/testing/post_campaigns.php?username=XXX&password=YYY

但我只看到:

http://localhost/testing/post_campaigns.php

我的变量已正确写入控制台,因此我知道它们存在并且具有值。

我确定问题出在我的语法上;但是我不确定如何正确设置Ajax格式以容纳对象FormData和字符串变量username / password。

基本上,我的总体代码会要求用户提供一张他们在指定的列标题下填写了特定值的工作表,然后我阅读了该信息并将其发布到我们的广告服务器中。因此,当我使用用户请求的信息/更改对广告服务器执行POST请求时,需要将用户提供的FormData和用户名/密码都传递到我的PHP文件。

如果我的问题/难题不清楚,或者您需要更多代码,请告诉我。

谢谢

编辑:根据请求在控制台中附加FormData的屏幕快照。 enter image description here

1 个答案:

答案 0 :(得分:2)

jQuery / AJAX代码:- 用于与其他javascript变量一起发送formdata。

<script>
    $('#btn').on("click", function () {
            var formData = new FormData($("#form1")[0]);
            formData.append('ipid',id); //id is the variable that has the data that I need
            var path = "http://localhost/testing/post_campaigns.php",
            $.ajax({
                url: path,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (stuff) {
                    $("#resp").html(stuff);
                }
            });
        });
    });
</script>

注意:- 要附加参数,只需使用append()方法:

formData.append(“ param”,“ value”);

然后在php端捕获它:

echo $ pid =($ _POST ['ipid']);

注意:-有关此检查的更多参考

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append