Ajax异步请求的步骤

Posted 2021-08-27 Xmange233

• Ajax的定义
   

  AJAX = 异步 javascript 和 XML。
  传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
  AJAX可以用于快速创建动态网页，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
   

• Ajax实例请求
   

             $.ajax({
                  url: some url which you request,
                  method: 'POST',     //request method
                  data: {},           //parameters
              }).then(function (data) {
                  if (data.success) {
                      alert(data.success);
                  } else {
                      alert(data.message);
                  }
              });
          }

  下面附上一个在公司关于Ajax的task

• JavaScript:
   

  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  <%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
  <%@ taglib prefix="s" uri="/struts-tags" %>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
  
  <s:text name="admin.payment.method.field.label" var="fieldTitle"/>
  <s:text name="admin.payment.method.optional.label" var="optionalTitle"/>
  <s:text name="admin.payment.method.dataList.label" var="dataListTitle"/>
  <s:text name="admin.payment.method.defaultValue.label" var="defaultValueTitle"/>
  <s:text name="admin.payment.method.fieldType.label" var="fieldTypeTitle"/>
  <s:text name="admin.payment.method.userField.label" var="userFieldTitle"/>
  <s:text name="admin.payment.method.targetField.label" var="targetTitle"/>
  <s:text name="admin.payment.method.visible.label" var="visibleTitle"/>
  
  <display:table id="fields" class="grid" cellspacing="1"
                 style="width:98%;border 1px solid #000000;"
                 list="${config.method.fields}">
  
      <display:column title="${fieldTitle}" property="field"/>
      <display:column title="${optionalTitle}">
          <input type="checkbox" <c:if test='${fields.optional}'> checked </c:if> name="updateOptional" class="checked" fieldId="${fields.paymentMethodAttributeId}"/>
      </display:column>
      <display:column title="${dataListTitle}">
          <input type="text" value="${fields.dataList}" name="updateDataList" class="list" fieldId="${fields.paymentMethodAttributeId}"/>
      </display:column>
      <display:column title="${defaultValueTitle}">
          <input type="text" value="${fields.defaultValue}" name="updateDefaultValue" class="list" fieldId="${fields.paymentMethodAttributeId}"/>
      </display:column>
      <display:column title="${userFieldTitle}" property="userField"/>
      <display:column title="${targetTitle}" property="targetField"/>
      <display:column title="${fieldTypeTitle}" property="fieldType"/>
      <display:column title="${visibleTitle}">
          <input type="checkbox" <c:if test='${fields.visible}'> checked </c:if> name="updateVisible" class="checked" fieldId="${fields.paymentMethodAttributeId}"/>
      </display:column>
  
  </display:table>
  
  <script>
      (function () {
          'use strict';
  
          var $context = $.scriptContext(),
              //$form = $('form', $context),
              $checked = $('.checked', $context),
              $list = $('.list', $context);
  
          $checked.on('click.custom', function () {
              var value = $(this).is(":checked");
  
              update(this, value)
          });
  
          $list.on('change.custom', function () {
              var value = $(this).val();
  
              update(this, value)
          });
  
          function update(element, value) {
              var data = {
                  paymentMethodAttributeId: $(element).attr("fieldId")
              }
              if (element.name == 'updateVisible') {
                  data.visible = value;
              }
              if (element.name == 'updateOptional') {
                  data.optional = value;
              }
              if (element.name == 'updateDataList') {
                  data.dataList = value;
              }
              if (element.name == 'updateDefaultValue') {
                  data.defaultValue = value;
              }
              $.ajax({
                  url: bo.urlPrefix + 'json/paymentMethodConfig!' + element.name,
                  method: 'POST',
                  data: data,
              }).then(function (data) {
                  if (data.success) {
                      toastr.success("<s:text name='admin.payment.method.field.update.success'/>");
                  } else {
                      toastr.error(data.message)
                  }
              });
          }
  
      })();
  </script>
  

•  Json Methods：
  
   

  @Autowired PaymentConfigurationService paymentConfig
  
      Long paymentMethodAttributeId
      Boolean visible
      Boolean optional
      String dataList
      String defaultValue
   
  
  
  
  String updateVisible() {
          try {
              paymentConfig.updatePaymentMethodAttributeFields(paymentMethodAttributeId, [visible: visible])
              result.success = true
              SUCCESS
          } catch (Exception e) {
              result.success = false
              result.message = exceptionHandler.handleExceptionErrorMessage(e, this, null)
              ERROR
          }
      }
  
      String updateOptional() {
          try {
              paymentConfig.updatePaymentMethodAttributeFields(paymentMethodAttributeId, [optional: optional])
              result.success = true
              SUCCESS
          } catch (Exception e) {
              result.success = false
              result.message = exceptionHandler.handleExceptionErrorMessage(e, this, null)
              ERROR
          }
      }
  
      String updateDataList() {
          try {
              paymentConfig.updatePaymentMethodAttributeFields(paymentMethodAttributeId, [dataList: dataList])
              result.success = true
              SUCCESS
          } catch (Exception e) {
              result.success = false
              result.message = exceptionHandler.handleExceptionErrorMessage(e, this, null)
              ERROR
          }
      }
  
      String updateDefaultValue() {
          try {
              paymentConfig.updatePaymentMethodAttributeFields(paymentMethodAttributeId, [defaultValue: defaultValue])
              result.success = true
              SUCCESS
          } catch (Exception e) {
              result.success = false
              result.message = exceptionHandler.handleExceptionErrorMessage(e, this, null)
              ERROR
          }
      }