jQuery Ajax请求XML格式数据

最新推荐文章于 2021-09-07 18:27:06 发布

yishowifyyx

最新推荐文章于 2021-09-07 18:27:06 发布

阅读量494

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/yishowifyyx/article/details/84177676

版权

[b][size=x-large]jQuery Ajax请求XML格式数据[/size][/b]

HTML部分：

     
  <body>
    <form action='javascript:void(0);' method='post'>
       <fieldset>
         <legend>Address</legend>
       <div id='hLocationCountryIDWrapper'>
         <label for='hLocationCountryID'>
           <img src='../../../Images/Flags/us.png' alt='Country' />
         </label>
         <select id='hLocationCountryID' size='1' 
                 name='hLocationCountryID' class='hFormSelectInput'>
           <option value='0'>Please select a country</option>
           <option value='1' selected='selected'>China</option>
           <option value='2'>United States</option>
         </select>
       </div>
       <div>
         <label for='hLocationStreetAddress'>Street Address:</label>
         <textarea name='hLocationStreetAddress' 
                   id='hLocationStreetAddress' rows='2' cols='50'></textarea>
       </div>
       <div>
         <label for='hLocationCity'>City:</label>
         <input type='text' name='hLocationCity' id='hLocationCity' size='25' />
       </div>
       <div>
         <label for='hLocationStateID'>State:</label>
         <select name='hLocationStateID' id='hLocationStateID'>
         </select>
       </div>
       <div>
         <label for='hLocationPostalCode'>Postal Code:</label>
         <input type='text' name='hLocationPostalCode' 
                id='hLocationPostalCode' size='10' />
       </div>
       <div id='hLocationButtonWrapper'>
         <input type='submit' id='hLocationButton' 
                name='hLocationButton' value='Save' />
       </div>
       </fieldset>
     </form>
   </body>

CSS部分：

body {
    font: 16px sans-serif;
}
fieldset {
    background: #93cdf9;
    border: 1px solid rgb(200, 200, 200);
}
fieldset div {
    padding: 10px;
    margin: 5px;
}
fieldset label {
    float: left;
    width: 200px;
    text-align: right;
    padding: 2px 5px 0 0;
}
div#hLocationCountryIDWrapper img {
    position: relative;
    top: -4px;
}
div#hLocationButtonWrapper {
    text-align: right;
}

JS部分：

$(document).ready(
  function() {
    $('select#hLocationCountryID').click(
      function() {
        $.get(
          this.value + '.xml',
          function($xml) {
            // Make the XML query-able with jQuery
            $xml = $($xml);

            // Get the ISO2 value, that's used for the 
            // file name of the flag.
            var $iso2 = $xml.find('hLocationCountryISO2').text();

            // Swap out the flag image
            $('img[alt=Country]').attr(
              'src',
              '../../../Images/Flags/' + $iso2.toLowerCase() + '.png'
            );

            // Remove all of the options
            $('select#hLocationStateID').empty();

            // Set the states... 
            $xml.find('hLocationState').each(
              function() {
                $('select#hLocationStateID').append(
                  "<option value='" + $(this).attr('hLocationStateID') + "'>" +
                  $(this).text() +
                  "</option>"
                );
              }
            );

            // Change the label
            $('label[for=hLocationStateID]').text(
              $xml.find('hLocationStateLabel').text() + ':'
            );
          },
          'xml'
        );
      }
    );
  }
);

XML部分：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<response>
  <hLocationCountryISO2>CN</hLocationCountryISO2>
  <hLocationStateLabel>Province</hLocationStateLabel>
  <hLocationState hLocationStateID='0'> </hLocationState>
  <hLocationState hLocationStateID="01">Beijing</hLocationState>
  <hLocationState hLocationStateID="02">Shanghai</hLocationState>
  <hLocationState hLocationStateID="03">Hongkong</hLocationState>
  <hLocationState hLocationStateID="04">Taiwan</hLocationState>
</response>

结果：
[img]http://dl.iteye.com/upload/attachment/0065/6958/2f4f9dab-5142-3398-a4ee-0c3a91e9b660.png[/img]