Hongmu Notes
Home Language Notes jquery ajax submits data to the backend and returns to processing
Language Notes JavaScript

jquery ajax submits data to the backend and returns to processing

jquery ajax submits data to the backend and returns to processing

My requirements

  1. After clicking the Submit button, the data from the specified input field will be sent to the backend via AJAX.
  2. If the operation is successful, the information in the specified input field will be updated to the value of the `text` field in the returned JSON object.
  3. If the operation fails, update the text in the specified input field to "Sorry".

Implement code

$("#submit-btn").click(function() {
  // 获取指定 input 元素的值
  var inputVal = $("#your-input").val();

  // 使用 Ajax 发送数据到后端
  $.ajax({
    url: "your_api_url",
    type: "POST",
    data: {inputVal: inputVal},
    dataType: "json",
    success: function(response) {
      // 当请求成功时,更新指定 input 的值为返回的 JSON 数据中的 text 字段
      $("#your-input").val(response.text);
    },
    error: function(xhr, status, error) {
      // 当请求失败时,修改指定 input 的值为 "抱歉"
      $("#your-input").val("抱歉");
    }
  });
});

In the above code,#submit-btn The ID of the submit button,#your-input For specifying the data to be transmitted input Element ID. After clicking the submit button, use it. .val() Method: Specify input The element's value is then sent to the backend as data. success Use within a callback function response.text To retrieve JSON data text Field, and use .val() Set it to the specified value. input Element value. In error In the callback function, specify. input The element's value is set to "Sorry".

Of course, you need to... your_api_url Replace with your actual value, and then #your-input Replace with the data you wish to send. input elementalID.

微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

js move the mouse up to modify the style attribute

js move the mouse up to modify the style attribute Language Notes JavaScript

When the mouse hovers over the element, the color changes to red; when the mouse leaves the element, the color changes to black. To retrieve an element by its ID: `document.getElementById()`; Event handler for mouse hover: `onmouseover`; Event handler for mouse leave: `onmouseout`.<!DOCTYPE html><html lang= "en">...
👁 130

Recommended reading

(Adaptive mobile version) Tombyard Website – PBootCMS Template; Download Source Code for Funeral Service Industry Websites – 0414

(Adaptive mobile version) Tombyard Website – PBootCMS Template; Download Source Code for Funeral Service Industry Websites – 0414 Practical Collection pbootcms Template

An adaptive mobile-friendly PbootCMS website template designed for the cemetery and funeral services industry. Its solemn and dignified design is ideal for showcasing cemetery environments, funeral rituals, and service offerings. This template helps funeral service providers convey their human-centered care online and establish a professional image. Template Preview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles...
👁 39
Medical Device Research Website Template 0356

Medical Device Research Website Template 0356 Practical Collection Yiyou template

An EyouCMS website template designed specifically for the medical device and scientific research industries. Its professional, tech-oriented design is ideal for showcasing medical device products, research projects, technical capabilities, and corporate image. This template helps healthcare and research enterprises effectively present their brands online and attract clients from hospitals and research institutions. Template Overview | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Common Questions About Installing EyouCMS...
👁 50
(Adaptive Mobile Version) PBootCMS Website Template – Custom Caravan and Canopy Membrane Structure Engineering Company – Download Custom Website Source Code – 0415

(Adaptive Mobile Version) PBootCMS Website Template – Custom Caravan and Canopy Membrane Structure Engineering Company – Download Custom Website Source Code – 0415 Practical Collection pbootcms Template

This set includes an adaptive mobile-friendly canopies membrane structure project and a customized PbootCMS website template for carport projects. The modern, professional design style is ideal for showcasing membrane structure products and exemplary membrane structure or carport project cases. It enables membrane structure companies to demonstrate their design and construction capabilities online, attracting both commercial and public clients. Template Display | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5....
👁 36
Home Moving Express Delivery Company Website Template 0357

Home Moving Express Delivery Company Website Template 0357 Practical Collection Yiyou template

This EyouCMS template is ideal for moving, courier, and freight forwarding companies. Its efficient and professional design effectively showcases moving services, courier networks, shipping solutions, and the company's capabilities. It helps moving and courier firms promote their brand online and attract both individual and corporate clients. Template Overview | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS...
👁 38
(Adaptive mobile version) Food – Rice & Wheat PbootCMS website template; Responsive agricultural food website source code download – 0416

(Adaptive mobile version) Food – Rice & Wheat PbootCMS website template; Responsive agricultural food website source code download – 0416 Practical Collection pbootcms Template

An adaptive mobile-friendly responsive website template for food products (e.g., rice, wheat, and other grains) and agricultural businesses, built with PbootCMS. Its natural and fresh design is ideal for showcasing agricultural products, cultivation bases, and the entire agricultural supply chain. This template helps agricultural enterprises showcase their brands online and expand their sales channels. Template Overview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles...
👁 47