使用jQuery Ajax传递数据？

Question

I have the html page below: 我有下面的HTML页面：

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>HTML</title>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script>
            $(document).ready(function() {
                $("#b1").click(function(event) {
                    $.ajax({
                        type : "POST",
                        url : "index.php",
                        data : "valx=2",
                        contentType : "application/x-www-form-urlencoded",
                        dataType : "text",
                        complete : function() {
                            alert('post completed');
                        },
                        error : function() {
                            alert('error condition');
                        },
                        success : function(data) {
                            $('.result').html(data);
                            alert('data is returned');
                        },

                        statusCode : {
                            200 : function() {
                                alert("page was found");
                            }
                        }

                    });
                    event.preventDefault();
                });
            });
        </script>
    </head>

    <body>
        <div>
            <button id="b1">
                Click Me!
            </button>
        </div>
        <div class="result"></div>

    </body>
</html>

And then I have the following php page: 然后，我有以下php页面：

<?php
     $my_string =  $_REQUEST["valx"]; 
     $my_string = $my_string +9;
     echo $my_string;
?>

Everything works perfectly as is, but I was trying to figure out how to change the post data to the form: 一切都按原样完美运行，但是我试图弄清楚如何将发布数据更改为表单：

 data: '{ valx:"2"}'

And this is where it breaks. 这就是它的坏处。 I tried many forms of data: '{ valx:"2"}' and still no luck. 我尝试了多种形式的数据：'{valx：“ 2”}'仍然没有运气。 It seems as if the php script is not getting the data correctly. 似乎php脚本无法正确获取数据。 Also note that using this format it seems that contentType : "application/x-www-form-urlencoded", needs to be changed as well. 另请注意，使用这种格式似乎也需要更改contentType : "application/x-www-form-urlencoded", 。

So the question is how do you pass data of the form data: '{ valx:"2"}' and get back a response of 11? 因此，问题是如何传递表单data: '{ valx:"2"}'并返回11的响应？

Thanks, Jim 谢谢，吉姆

Answer 1

The data parameter accepts a var=value&var1=value1 form, or a JavaScript object with keys/values. data参数接受var=value&var1=value1形式，或带有键/值的JavaScript对象。 You've given it this, which is a string... 您已经给了它，这是一个字符串...

data: '{ valx:"2"}`

... when you should have given it this, which is a real JS object: ...当您应该给它一个真实的JS对象时：

data: { valx:"2"}

Answer 2

Use an object not a string. 使用对象而不是字符串。 jQuery will parse the object into form encoded format. jQuery会将对象解析为表单编码格式。 Also remove your contentType option completely since this is not the type of data being sent, rather it is for data received and you will be receiving text/html 还要完全删除contentType选项，因为这不是要发送的数据类型，而是用于接收的数据，您将接收text / html

 data : { valx:"2"},

使用jQuery Ajax传递数据？

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-01-06 16:26:17

解决方案2
0 2013-01-06 16:27:31

使用jQuery Ajax传递数据？

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-01-06 16:26:17

解决方案2 0 2013-01-06 16:27:31

解决方案1
3 已采纳 2013-01-06 16:26:17

解决方案2
0 2013-01-06 16:27:31