来自 ajax 表单的 XML 请求答案

【问题标题】：XML request from ajax form来自 ajax 表单的 XML 请求
【发布时间】：2015-09-19 02:52:49
【问题描述】：

大家好，我是 java-script 的新手，所以我希望你能帮助我解决我的问题。所以我有了表格，它看起来像这样：

<form method="post">
  Field1: <input type="text" name="field1"><br>
  Field2: <input type="text" name="field2"><br>
  <input type="submit" value="Submit">
</form>

我需要从表单中获取数据并发出 xml 请求，xml 请求应该是这样的

<root>
   <header section>
      <section>data</section>
   </header section>
   <data section>
      <field1>data</field2>
      <field2>data</field2>
   </data section>
</root>

之后我必须在页面上显示 xml 响应。我提出了 xml 请求

<script>
                $('.button').click( function() {
                        $(".results").append("<ul></ul>");
                        $.ajax({
                                type: "GET",
                                dataType: 'xml',
                                url: 'response.xml',
                                success: function(xml) {
                                        $(xml).find('root').each(function(){
                                        var sField1 = $(this).find('field1').text();
                                        var sField2 = $(this).find('field2').text();
                                        $("<li></li>").html(sTitle + ", " + sPublisher).appendTo(".results ul");
                                        });
                                },
                                error: function() {
                                alert("An error occurred while processing XML file.");
                                }
                        });
                });
        </script>

但我不知道如何从表单中获取数据并提出请求。你能帮我吗？非常感谢。

【问题讨论】：

标签： javascript jquery ajax xml ajaxform

【解决方案1】：

// You can use jQuery to build XML document:

function buildXmlFromForm(form) {
  var xml = $('<XMLDocument />');
  xml.append (
    $('<header-section />').append(
      $('<section />').text('data')
    )
  ).append (
    $('<data-section />').append(
      $('<field1 />').text(form.find("input[name='field1']").val())
    ).append(
      $('<field2 />').text(form.find("input[name='field2']").val())
    )
  );

  return xml.html();
}

// you should use POST or PUT method (not GET) to post xml-data to server side
$( "#form1" ).submit(function(event) {
  event.preventDefault();
  $("#results").append("<ul></ul>");
  var xmlString = buildXmlFromForm($(this));
  $("#xmlSrc").val(xmlString);
  $.ajax({
    type: "POST",
    dataType: 'xml',
    url: 'response.xml',
    data: xmlString,
    success: function(respData) {
      $("<li></li>").html("ok: "+respData).appendTo("#results ul");
      console.log(respData);
    },
    error: function(errorData) {
      $("<li></li>").html("error: "+errorData.statusText).appendTo("#results ul");
      console.log(errorData);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" id="form1">
  Field1: <input type="text" name="field1" value="***v1***"><br/>
  Field2: <input type="text" name="field2" value="***v2***"><br/><br/>
  <input type="submit" value="Submit">
</form>
<hr/>
<textarea id="xmlSrc" cols="70" rows="5"></textarea>

<div id="results"/>

【讨论】：

【解决方案2】：

试试这个：

serialize会返回当前表单的formData

您的表单必须具有唯一标识符才能用作querySelector

$('#myForm').on('submit', function(e) {
  e.preventDefault();
  var formData = $(this).serialize();

  $(".results").append("<ul></ul>");
  $.ajax({
    type: "GET",
    dataType: 'xml',
    url: 'response.xml',
    data: formData,
    success: function(xml) {
      $(xml).find('root').each(function() {
        var sField1 = $(this).find('field1').text();
        var sField2 = $(this).find('field2').text();
        $("<li></li>").html(sTitle + ", " + sPublisher).appendTo(".results ul");
      });
    },
    error: function() {
      alert("An error occurred while processing XML file.");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="myForm">
  Field1:
  <input type="text" name="field1">
  <br>Field2:
  <input type="text" name="field2">
  <br>
  <input type="submit" value="Submit">
</form>

【讨论】：