Я совершенно новичок в этом, поэтому извиняюсь, если я не объясню это правильно.
Я хочу опубликовать некоторые данные в формате json для службы отдыха. Я пытаюсь получить эту работу с JQuery на простой странице.cshtml (бритва).
Моя строка json выглядит так:
{
"ListRequest":{
"Values":[
{
"Name":"SC",
"Value":"PRO001"
},
{
"Name":"PC",
"Value":"Z0R14"
}
]
}
}
Мне нужно передать 2 значения из формы в эту строку, а затем опубликовать ее, но я не уверен, как объявить это в javascript, а затем отправить ее в мою функцию $.post.
Мой HTML выглядит так:
<form action="/" id="getListForm">
<input type="text" name="txtSC">
<input type="text" name="txtPC">
<input type="submit" value="Get List">
</form>
Я думал, что просто объявлю var:
var jsonText = '{"ListRequest":{ "Values":[' +
'{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
'{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';
Это правильный способ справиться с этим?
Затем у меня есть код "post" для тестирования:
var posting = $.post( url, term);
posting.done(function (data) {
var content = $(data).find("#content");
$("#result").empty().append(content);
});
Но всякий раз, когда я называю это, он помещает эти 2 значения как часть строки запроса вместо того, чтобы делать фактическую запись, где эти данные не видны в URL-адресе.
http://localhost/WebTest/WebDataService.svc/GetList?txtSC=brc001&txtPC=12345
Может кто-нибудь сказать мне, как это исправить?
Благодарю.
ОБНОВИТЬ:
Вот полный код с моей тестовой страницы, поскольку он все еще не работает для меня. Я только заметил, что событие отправки не запускается. Кажется, что текстовое поле и значение автоматически помещаются, потому что они являются частью формы, но мое событие определенно не срабатывает, поскольку я только что прокомментировал весь код и поставил предупреждение ('test'); и он не появился.
Есть идеи?
Благодарю.
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
// Attach a submit handler to the form
$("#getListForm").submit(function (event) {
event.preventDefault();
//var jsonText = '{"ListRequest":{ "Values":[' +
// '{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
// '{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';
var obj = {
ListRequest: {
Values: [
{
Name: "SC",
Value: $('input[name="txtSC"]').val()
},
{
Name: "PC",
Value: $('input[name="txtPC"]').val()
}
]
}
}
var jsonObj = JSON.stringify(obj);
var $form = $(this), term = jsonText, url = 'http://localhost/WebTest/DataService.svc';
$.post(url + '/GetList', jsonObj,
function (data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
// Send the data using post
//var posting = $.post( url, term);
//posting.done(function (data) {
// var content = $(data).find("#content");
// $("#result").empty().append(content);
//});
});
</script>
@{
ViewBag.Title = "Json Test";
}
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<form id="getListForm">
<input type="text" name="txtSC">
<input type="text" name="txtPC">
<input type="submit" value="Get List">
</form>
<div id="result"></div>
Благодарю.
ОБНОВИТЬ:
Последний код, где я обновил термин для использования jsonObj, и я поместил свой код в блок $ (document).ready, как было предложено:
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// Attach a submit handler to the form
$("#getDocumentListForm").submit(function (event) {
event.preventDefault();
alert('test1');
var obj = {
ListRequest: {
Values: [
{
Name: "SC",
Value: $('input[name="txtSC"]').val()
},
{
Name: "PO",
Value: $('input[name="txtPC"]').val()
}
]
}
}
var jsonObj = JSON.stringify(obj);
var $form = $(this), term = jsonObj, url = 'http://localhost/WebTest/DataService.svc';
alert(term);
alert(url);
$.post(url + 'GetList', jsonObj,
function (data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
//Tried posting using term but no luck. Same problem.
//$.post(url + 'GetList',
//function (data, status) {
// alert("Data: " + data + "\nStatus: " + status);
//});
// Send the data using post
//var posting = $.post(url, term);
//posting.done(function (data) {
// //var content = $(data).find("#content");
// //$("#result").empty().append(content);
// alert(data)
//});
alert('test2');
});
});
</script>
@{
ViewBag.Title = "Test";
}
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<form id="getDocumentListForm">
<input type="text" name="txtSC">
<input type="text" name="txtPC">
<input type="submit" value="Get Document List">
</form>
<div id="result"></div>
Финальное обновление по этому вопросу
УБЕДИТЬСЯ:
НЕ ИСПОЛЬЗОВАТЬ IE11 С JQUERY, ХОРОШО В МЕНЬШЕМ СОКРАЩЕНИИ 2.1.1! НЕ ЗНАЙ, КАК ЭТО РАБОТАЕТ С ДРУГИМИ ВЕРСИЯМИ IE.
ВСЕГДА ИСПЫТАТЬ С ДРУГИМИ ПРОСМОТРАМИ
УБЕДИТЕСЬ, ЧТОБЫ УСТАНОВИТЬ ВАШ ДЖЕРКВЫЙ SRC К ПРАВИЛЬНОМУ ИСПОЛЬЗОВАНИЮ HTTP ИЛИ HTTPS В ЗАВИСИМОСТИ ОТ ЧТО ВЫ ИСПОЛЬЗУЕТЕ.
Это.
Я предполагаю, что происходит то, что вы пытаетесь передать неопределенную переменную с именем term
вместо jsonText
, поэтому код javascript бросает неперехваченное исключение и игнорируется, и вы получаете нормальное действие из вашего элемента form
.
Вы должны передать правильные данные. А также, зная о JSON.stringify
возможно, сэкономит вам много времени и головных болей;). Вы можете создать свой объект так:
var obj = {
ListRequest: {
Values: [
{
Name: "SC",
Value: $('input[name="txtSC"]').val()
},
{
Name: "PC",
Value: $('input[name="txtPC"]').val()
}
]
}
};
var jsonObj = JSON.stringify(obj);
Еще одна ошибка, которую я могу придумать в вашем коде, заключается в том, что вы привязали свой AJAX к событию click
на кнопке отправки или событию onsubmit
, и вы не preventDefault()
ing.
Учитывая код, который вы опубликовали, у вас есть несколько ошибок:
jQuery(document).ready()
?jsonText
но все же назначили его переменной term
, вызывая неперехваченное исключение. Исправьте эти две вещи, и ваш запрос POST
будет выполнен правильно.
С другой стороны, почему на Земле вы используете jQuery версии 1.5?
term
(какой бы он ни был), а неjsonText
? Кроме того, было бы проще, красивее и менее подвержено ошибкам построить объект JavaScript, а затем использоватьJSON.stringify
для него.