无法从Ajax获取HTML或将响应附加到DIV-JQuery

时间:2019-03-13 20:05:12

标签: jquery html ajax

我正在尝试从控制器获得简单的响应,并将其附加到div,以便可以在前端看到输出。这是我的JQuery:

 $('.js-mapsearch').keyup(function (e) {

            var characters = $(this);
            var $output = $('.js-output');

            console.log(characters.val() + ' was pressed');

            $.ajax({
                type: "POST",
                url: '/umbraco/surface/MapSearchSurface/GetPlaces?Characters=' + characters,
                datatype: 'html',
                contentType: 'application/text',
                success: function (data) {

                    if (data) {
                        $output.append($(data).html());
                        console.log($(data).html());
                        console.log(data);
                    }

                },
                error: function (ex) {
                    console.log(ex);
                }
            });

            e.preventDefault();



});

这里是console.log

console.log($(data).html());  // [object Object]
console.log(data);            // <div class="js-places-container">[object Object]</div>

这是razor代码:

@model Prodo.umbraco.Web.Models.GetPlacesModel

<div class="js-places-container">@Model.Places</div>

这是我的controller代码:

public ActionResult GetPlaces(string Characters)
        {
            var Model = new GetPlacesModel();

            Model.Places = Characters;

            return PartialView("~/Views/Partials/_MapSearchResults.cshtml", Model);
        }

model代码:

public class GetPlacesModel
    {
        public string Places { get; set; }
    }

从理论上讲,我现在应该可以看到通过$('.js-output') div在前端键入了哪些字符。有人可以帮忙吗。

2 个答案:

答案 0 :(得分:1)

好吧,您的代码完全按照您的要求工作,只是在JavaScript中传递了字符串[object Object]

将其设置为对象

var characters = $(this);

以及使用时

url: '/umbraco/surface/MapSearchSurface/GetPlaces?Characters=' + characters

它调用.toString()对象的默认characters方法。

您要实际执行的操作是这样设置的:

var characters = $(this).val();

或者类似的方法来获取想要传递的字符串值。

答案 1 :(得分:1)

您可以尝试以下操作:

$.get('your/url/template.html').done(function (data) {
       $('#your_div').append(data);
});