使用PHP和AJAX使用表单发送/接收JSON

时间:2011-10-10 10:24:56

标签: php jquery html ajax json

我正在尝试使用单个文本字段和提交按钮构建一个简单的表单,单击该按钮时,将值发布到$ .getJSON方法,该方法检索JSON响应并将其输出到网页。

无论如何我可以使用AJAX和PHP动态执行此操作吗?我是否需要使用$ .ajax方法将值发布到PHP页面,或者我可以只折射现有方法。

$.getJSON(
    "https://www.googleapis.com/shopping/search/v1/public/products?callback=?",
    {
        key: "keyhere", 
        country: "US", 
        q: searchterm, 
        alt: "json" 
    },
    function(data) {

        $.each(data.items, function(i, item){

            if (item.product.images.length > 0) // sanity check
            {

            //global variables
            var link = item.product.images[0]['link'];
            var title = item.product.title;

                var listData = "<li>" + title + "</li>" + '<img title="' + title + '" src="' + link + '" />';

                $('#lists').append(listData);

                var img = $("<img/>").attr("src", link);
                $("<a/>").attr({href: link, title: "image title"}).append(img).appendTo("#images");

                console.log(data)
            }
        });
    }
);

编辑:

感谢SBerg413,我设法将方法更改为.ajax并且它完美运行,如下所示:

var apiKey = "key";
var country = "US";
var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";
var search = 'starwars';

$.ajax({
    url: apiurl,
    dataType: 'jsonp',
    data : 
    {
        key: apiKey, 
        country: country, 
        q: search,
    },
    success: function(data) {

         $.each(data.items, function(i, item){

            if (item.product.images.length > 0) // sanity check
            {

            //global variables
            var link = item.product.images[0]['link'];
            var title = item.product.title;

                var listData = "<li>" + title + "</li>" + '<img title="' + title + '" src="' + link + '" />';

                $('#lists').append(listData);

                var img = $("<img/>").attr("src", link);
                $("<a/>").attr({href: link, title: "Courtesy of James"}).append(img).appendTo("#images");

                console.log(data)
            }
        });


        // console.log(data);
        console.log(data)
    }
});

1 个答案:

答案 0 :(得分:2)

jQuery getJSON方法只是ajax()方法的简写。 http://api.jquery.com/jQuery.getJSON/ 所以,你应该能够使用其中之一。但是,getJSON方法使用GET。因此,如果您特别想使用POST,最好使用ajax()方法。