使用jQuery POST和php序列化并提交表单

Dan*_*inu 44 php forms jquery serialization form-submit

我正在尝试使用jQuery发送表单的数据.但是,数据无法到达服务器.你能告诉我我做错了什么吗?

<form id="contactForm" name="contactForm" method="post">
    <input type="text" name="nume" size="40" placeholder="Nume">
    <input type="text" name="telefon" size="40" placeholder="Telefon">
    <input type="text" name="email" size="40" placeholder="Email">
    <textarea name="comentarii" cols="36" rows="5" placeholder="Message"></textarea> 
    <input id="submitBtn" type="submit" name="submit" value="Trimite">
</form>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

<script type="text/javascript">
    $(document).ready(function(e) {

        $("#contactForm").submit(function() {
            $.post("getcontact.php", $("#contactForm").serialize())
            // Serialization looks good: name=textInNameInput&&telefon=textInPhoneInput etc
            .done(function(data) {
                if (data.trim().length > 0) {
                    $("#sent").text("Error");   
                } else {
                    $("#sent").text("Success");
                }
            });

            return false;
        })
    });
</script>
Run Code Online (Sandbox Code Playgroud)

和服务器端:

$nume = $_REQUEST["nume"]; // $nume contains no data. Also tried $_POST
$email = $_REQUEST["email"];
$telefon = $_REQUEST["telefon"];
$comentarii = $_REQUEST["comentarii"];
Run Code Online (Sandbox Code Playgroud)

你能告诉我我做错了什么吗?

编辑:检查var_dump($_POST)并返回一个空数组.

奇怪的是,在我的本地机器上测试的相同代码工作正常.如果我上传托管空间中的文件,它将停止工作.
我尝试不使用jquery做一个老式的表单,所有数据都是正确的.

我不知道这将是一个服务器配置问题.有任何想法吗?

谢谢!

zam*_*mil 93

您可以使用此功能

var datastring = $("#contactForm").serialize();
$.ajax({
    type: "POST",
    url: "your url.php",
    data: datastring,
    dataType: "json",
    success: function(data) {
        //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handling here');
    }
});
Run Code Online (Sandbox Code Playgroud)

返回类型是json

编辑:我event.preventDefault用来防止浏览器在这种情况下提交.

在答案中添加更多数据.

dataType: "jsonp" 如果是跨域调用.

beforeSend: //这是一个预请求回调函数

complete: //在请求结束后要调用的函数.无论成功与否,必须执行的代码都可以在这里

async: //默认情况下,所有请求都是异步发送的

cache://默认为true.如果设置为false,它将强制浏览器不缓存请求的页面.

这里找到官方页面


小智 30

您可以使用表单数据添加额外数据

使用serializeArray并添加其他数据:

var data = $('#myForm').serializeArray();
    data.push({name: 'tienn2t', value: 'love'});
    $.ajax({
      type: "POST",
      url: "your url.php",
      data: data,
      dataType: "json",
      success: function(data) {
          //var obj = jQuery.parseJSON(data); if the dataType is not     specified as json uncomment this
        // do what ever you want with the server response
     },
    error: function() {
        alert('error handing here');
    }
});
Run Code Online (Sandbox Code Playgroud)


Jan*_*n.J 0

您是否在控制台中检查过表单中的数据是否已正确序列化?ajax请求是否成功?此外,您没有关闭占位符引用,这可能会导致一些问题:

 <textarea name="comentarii" cols="36" rows="5" placeholder="Message>  
Run Code Online (Sandbox Code Playgroud)