Wie jquery+ajax die Datenaktualisierung implementiert

Dieses Mal zeige ich Ihnen, wie Sie die Datenaktualisierung mit jquery+ajax implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Datenaktualisierung?

Anwendungshintergrund

Verwenden Sie die Springboot-ArchitekturUm Daten im unten gezeigten Schnittstellenlayout zu speichern oder zu aktualisieren, müssen Sie diese an How to senden prompter Erfolg oder Misserfolg im Hintergrund? Wenn Sie den herkömmlichen SpringMVC-Modus verwenden, müssen Sie eine Seite an das Frontend übergeben. Auf dieser Seite wird nur abgefragt, ob der Vorgang erfolgreich war! Nach der Eingabeaufforderung müssen die Daten aktualisiert werden, genau wie einige Eingabeaufforderungen beim Durchsuchen bestimmter Websites. Der Vorgang ist erfolgreich und wird nach 5 Sekunden zurückgegeben.

Es ist dumm und das Kundenerlebnis ist schlecht.

Transformationsprozess

Kann die Verwendung von Ajax die oben genannten Probleme lösen?

Die Antwort lautet „Ja“. Nachdem Sie auf „Speichern“ geklickt haben, wird eine Ajax-Anfrage an den Hintergrund gesendet, wobei das ResponseBody-Tag verwendet wird, um die Rückgabe nur auf Daten zu beschränken. Geben Sie dann einfach die entsprechenden Eingabeaufforderungsinformationen basierend auf den zurückgegebenen Daten ein.

Herkömmliche Ajax-Anfragedaten erfordern die Neuorganisation der Daten im Formular und das Einfügen aller Daten in unseren Anfragetext. Wie im folgenden Code gezeigt:

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

Wenn die von mir übermittelten Formulardaten relativ groß sind, sind auch die Daten relativ groß. Der Code ist relativ aufgebläht. Gleichzeitig hat die Form Form auch ihren Daseinssinn verloren.

Gibt es eine elegantere Möglichkeit, die Ajax-Übermittlung von Formularen zu implementieren? sicherlich.

Das Ajaxform-Plug-in von jquery ist eine relativ gute Wahl.

Implementierungsprozess

Der erste Schritt. Natürlich stellen wir unsere leistungsstarken Plug-Ins vor.

<script></script>

Um die js herunterzuladen, gebe ich Ihnen die Github-Adresse: https://github.com/jquery-form/form.

Schritt zwei. Senden Sie die Ajax+Form-Anfrage dorthin, wo wir die Anfrage senden möchten.

function insert() {
    var options = {
     // target:  '#output1', // 用服务器返回的数据 更新 id为output1的内容.
     // beforeSubmit: showRequest, // 提交前
     success:  showResponse, // 提交后
     //另外的一些属性:
     //url:  url   // 默认是form的action，如果写的话，会覆盖from的action.
     //type:  type  // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
     //dataType: null  // 'xml', 'script', or 'json' (接受服务端返回的类型.)
     //clearForm: true  // 成功提交后，清除所有的表单元素的值.
     resetForm: false  // 成功提交后，重置所有的表单元素的值.
     //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
     //当请求大于3秒后，跳出请求.
     //timeout: 3000
    };
    //'ajaxForm' 方式的表单 .
    $('#baseForm').ajaxSubmit(options);
   }

Verarbeiten Sie die nach der Übermittlung zurückgegebene Methode

// 提交后
   function showResponse(responseText, statusText) {
    alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText);
    
   }

Hintergrundimplementierungscode

@RequestMapping("/basicSave")
 @ResponseBody
 public String BasicSave(PointInfo pi){
  if(!pi.getSaddress().equals("")){
   pi.setType("1");
  }else{
   pi.setType("0");
  }
  int newId = pointInfoService.saveorupdate(pi);
  return newId+"";
 }

Definieren Sie die Logik selbst

Hinweis

• Verwenden Sie beim Senden unbedingt die ajaxSubmit-Methode

• Gesendete Aktion, Anforderungsmethode (Beitrag). oder get), dataType (json, xml) usw. verwenden standardmäßig die Daten im Formular. Wenn sie in den Parametern geändert werden, werden sie überschrieben.

Nachuntersuchung

Über die Eingabeaufforderungsbox

Alarm verwenden? Ich habe mein Bestes gegeben, um Bootstrap zu verwenden. Wenn Sie hier eine Warnung erstellen, ist das, als würde man auf einen Teller mit leckerem Essen spucken. Gibt es eine schönere Eingabeaufforderungsbox? Die Antwort lautet natürlich: Ja!

Verwenden Sie das Benachrichtigungs-Plug-in, um das Eingabeaufforderungsfeld zu verschönern

Zuerst das Rendering:

Implementierungsschritte

1. Importieren Sie die für Benachrichtigungen erforderlichen JS- und CSS-Dateien

<script></script>
 <script></script>
 <script></script>
 

2. Rufen Sie einfach die Schnittstelle auf

$.Notification.notify('success','top center', '温馨提示', '保存成功！');

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ajax in JQuery anfordern und Ajax im Servlet antworten

Verwenden Sie JQuery, um das Eingabefeld zu bedienen Der Textinhalt von

erzielt den Verknüpfungseffekt zwischen dem Eingabefeld und dem Dropdown-Feld

Das obige ist der detaillierte Inhalt vonWie jquery+ajax die Datenaktualisierung implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!