从 XML 填充 jquery 表单
populate jquery form from XML
我正在尝试使用来自XML的数据填充jquery表单,其中XML具有一个id,该id将填充表单中的下拉列表,并且在选择id后将填充其他表单字段。顺便说一句,我不会使用 PHP
我的 XML
<XMLReview>
<plan>
<planNumber>773</planNumber>
<Area>Upper Missouri</Area>
<ID>MISSOURI-NUT</ID>
<Name>Missouri River</Name>
<code>10030101</code>
<County>Broadwater</County>
<Station_ID>M09MISSR05</Station_ID>
</plan>
<plan>
<planNumber>774</planNumber>
<Area>Columbia</Area>
<ID>FLAT-STILL-TPA-2013</ID>
<Name>Sheppard Creek</Name>
<Description>- 3A</Description>
<code>17010210</code>
<County>Flathead</County>
<Station_ID>C09SHEPC04</Station_ID>
</plan>
</XMLReview>
该目录
<form>
<input type="button" id="btnxml" value="XML" onclick="getXML()" />
ID <input type="text" name="ID" id="ID">
planNumber<input type="text" name="Name" id="planNumber">
area<input type="text" name="Area" id="Area">
Name: <input type="text" name="Name" id="Name">
Description: <input type="text" name="Description" id="Description">
Station ID <input type="text" name="Station_ID" id="Station_ID">
<label class="Code-label" for="code">HUC</label>
<select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
<option></option>
<option> 10010001</option>
<option> 10010002</option>
<option> 10020001</option>
</select>
<label class="county-label" for="County">County</label>
<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
<option></option>
<option> Beaverhead </option>
<option> Big Horn </option>
<option> Blaine </option>
</select>
</form>
脚本
<script>
function getXML()
{
$.get("XMLReview.xml", function(data) {
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
});
});
}
});
alert(data);});
}
</script>
不幸的是,这不起作用,我不知道为什么。谁能帮我
一两件事:
您正在以内联方式指定 onclick 事件:
<input type="button" id="btnxml" value="XML" onclick="getXML()" />
为什么不把所有东西都放在一个地方——因为你已经在使用相当多的jQuery了。只需像这样将其添加到javascript块中:
<input type="button" id="btnxml" value="XML" />
和
$('#btnxml').click(function() {
getXML();
});
如果不检查你的javascript/ajax代码,这个结构是错误的:
function getXML(){
$.get("XMLReview.xml", function(data) { <<======= REMOVE
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
}); //END $(xml).find.eq.find.each
}); //END #ID.change
}); //END $(xml).find.each
alert(data);
} //END AJAX.success fn
}); //END $.ajax
}); //END $.get <<=================================== REMOVE
}
它应该看起来像这样:
function getXML(){
$.ajax({
type: "GET",
url: "XMLReview.xml",
dataType: "xml",
success: function (xml) {
var select = $('#ID');
$(xml).find('plan').each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected'));
var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
var value = $(this).text();
}); //END $(xml).find.eq.find.each
}); //END #ID.change
}); //END $(xml).find.each
alert(data);
} //END AJAX.success fn
}); //END $.ajax
}
额外的 $.get() 包装器是不必要的。
请注意,$.ajax()
和$.get()
和$.post()
执行相同的操作。您正在使用更有条理$.ajax()
结构,这(恕我直言)更容易保持直截了当。
$.get()
简单地对type="GET"
进行硬编码,$.post()
对type="POST"
进行硬编码
另外,我对 XML 数据类型没有做太多工作,但我强烈怀疑xml
- 在 AJAX 代码块的成功函数中,在此上下文中:
success: function (xml) {
//post ajax code here, for eg.
alert(xml);
}
变量是否将包含来自服务器端脚本的任何内容?我不相信这是一个XML object
...
好的,
这里发生了很多事情,所以我认为一个新的实现比一系列更正更容易理解(我会尝试并注意你对 JavaScript 的理解可能需要一些工作的地方)首先是一个演示。 现在的 JavaScript:
$('#btnxml').on('click', function() {
var select = $('#ID'),
xml = $($.parseXML($('#XMLData').text())),
plans = xml.find('plan');
plans.each(function () {
var ID = $(this).find('ID').text();
select.append("<option>" + ID + "</option>");
});
$("#ID").change(function () {
var selectedIndex = $('#ID option').index($('#ID option:selected')),
plan = $(plans[selectedIndex]);
$('#planNumber').val(plan.find('planNumber').text());
$('#Area').val(plan.find('Area').text());
$('#Name').val(plan.find('Name').text());
$('#Description').val(plan.find('Description').text());
$('#Station_ID').val(plan.find('Station_ID').text());
$('#code').val(plan.find('code').text());
$('#County').val(plan.find('County').text());
}).trigger('change');
});
然后是 HTML
<script type='text/xml' id='XMLData'>
<XMLReview>
<plan>
<planNumber>773</planNumber>
<Area>Upper Missouri</Area>
<ID>MISSOURI-NUT</ID>
<Name>Missouri River</Name>
<code>10030101</code>
<County>Broadwater</County>
<Station_ID>M09MISSR05</Station_ID>
</plan>
<plan>
<planNumber>774</planNumber>
<Area>Columbia</Area>
<ID>FLAT-STILL-TPA-2013</ID>
<Name>Sheppard Creek</Name>
<Description>- 3A</Description>
<code>17010210</code>
<County>Flathead</County>
<Station_ID>C09SHEPC04</Station_ID>
</plan>
</XMLReview>
</script>
<form>
<input type="button" id="btnxml" value="XML" /><br/>
ID <select type="text" name="ID" id="ID"></select><br/>
planNumber<input type="text" name="Name" id="planNumber"><br/>
area<input type="text" name="Area" id="Area"><br/>
Name: <input type="text" name="Name" id="Name"><br/>
Description: <input type="text" name="Description" id="Description"><br/>
Station ID <input type="text" name="Station_ID" id="Station_ID"><br/>
<label class="Code-label" for="code">HUC</label>
<select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
<option></option>
<option>10010001</option>
<option>10010002</option>
<option>10020001</option>
<option>10030101</option>
<option>17010210</option>
</select>
<br/>
<label class="county-label" for="County">County</label>
<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
<option></option>
<option>Beaverhead</option>
<option>Big Horn</option>
<option>Blaine</option>
</select>
</form>
首先,我进行了这些更改,以便于在 JSFiddle 中演示,但它们不一定与最终代码匹配:
- 我伪造了 AJAX 请求(这里的另一个答案清楚地解释了如何正确使用 jQuery 优秀的 AJAX 帮助程序方法)。 当将此答案滚动到您的答案中时,您可以假设所有这些都包含在远程获取XML的
$.get()
中。 - 我还将 JavaScript 中处理的
click
绑定到$('#btnxml')
(这更干净,但也因为 JSFiddle 不喜欢指向命名函数的 onclick 属性),这并没有严格意义上的错误,它只是更干净。
现在进行实质性更改:
- 您实际上正在尝试做两件事,填充您的
$('#ID')
选择器(最初是一个不正确的<input type='text'>
,在此代码中我更新为<select>
,然后在填充后,您尝试绑定change
事件处理程序。 你们把这些步骤放在彼此里面,我把它们分开。 此外,以编程方式更改<select>
不会自动触发更改事件,因此我在末尾附加了一个.trigger('change')
。 - 您似乎也在尝试获取所选计划的子节点,并使用相同的名称更新相应的
input
。 您可以使用.childNodes
属性,但这将包括 XML 节点之间所有空格的TextNodes
,而不是尝试过滤掉它们,我认为单独映射它们会更干净。 如果您的 HTML 和 XML 不断更新,这可能对您不起作用,但我要说的下一点可能会阻止完全自动的方法。 - 根据值选择选项会带来一些挑战。 jQuery非常聪明。 如果你有一个
<select>
元素,其中包含一组没有value
属性的选项,并且你尝试通过该元素内的一个<option>
的字符串来设置该<select>
元素的.val()
,它将做正确的事情。 但是,如果没有与该值匹配的元素,则它将静默地传递它。 您的 XML 具有未显示在 HTML 中的代码和县值。 我添加了缺少的代码值以显示它正在工作,但我没有将它们添加到县<select>
。 如果您知道所有可能的代码和县,并且可以更新您的 HTML,那么这不会有问题,如果您希望在刚刚选择旧值时附加新值,那么您的代码会变得有点棘手。
相关文章:
- jQuery表单添加不适用于下拉列表
- 同时打印并提交表单-jQuery.Print
- 如何不清除表单jQuery中禁用的输入
- 如何检查输入中的值以及值是否存在提交表单?jquery.
- 登录表单 jQuery 插件无法按预期工作
- 谷歌电子表格网站表单jQuery脚本阻止发送
- 如何做不成功提交表单jquery
- 将表单和输入附加到表单jQuery Mobile
- 在我的切换表单jquery脚本中出现问题
- 使用动态表单 jquery 创建多维数组
- 使用一个类提交多个表单(jquery, rails)
- 有一个按钮打开右边的表单JQuery
- 取消按钮php表单jquery
- 按钮必须按一个特定的顺序发送表单- jquery
- 产品验证表单jquery
- rails嵌套表单jquery图像预览
- 获取表单(Jquery与Javascript)
- 将类型文件的输入附加到表单jquery中
- 如何从理想表单jQuery中删除验证规则
- Ruby on rails -加载更多按钮与kaminari和搜索表单.Jquery的问题