Hongmu Notes
Home Language Notes jQuery uses Ajax to submit messages and forms without refreshing
Language Notes JavaScript

jQuery uses Ajax to submit messages and forms without refreshing

jQuery uses Ajax to submit messages and forms without refreshing

PbootCMS itself will return Json data when submitting using ajax request, so we can implement ajax submission without using API, and customize page prompts to improve user experience.

 

1. Message form


<form onsubmit="return submsg(this);">
    联系人<input type="text" name="contacts" required id="contacts">
    手 机<input type="text" name="mobile" required id="mobile">
    内 容<textarea name="content" id="content"></textarea>
    验证码<input type="text" name="checkcode" required id="checkcode">
    <img title="点击刷新" src="{pboot:checkcode}" onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" />
    <button type="submit">提交留言</button>
</form>

 

2. Ajax submission


<script>

//ajax提交留言,由于涉及到提交地址标签的解析,JS需要放在html文件中
function submsg(obj){
  var url='{pboot:msgaction}'; //如果是自定义表单则使用地址{pboot:form fcode=*}
  var contacts=$(obj).find("#contacts").val();
  var mobile=$(obj).find("#mobile").val();
  var content=$(obj).find("#content").val();
  var checkcode=$(obj).find("#checkcode").val();
  
  $.ajax({
    type: 'POST',
    url: url,
    dataType: 'json',
    data: {
        contacts: contacts,
        mobile: mobile,
        content: content,
        checkcode: checkcode
    },
    success: function (response, status) {
      if(response.code){
         alert("谢谢您的反馈,我们会尽快联系您!");
         $(obj)[0].reset(); 
      }else{
         alert(response.data);
      }
    },
    error:function(xhr,status,error){
      alert('返回数据异常!');
    }
  });
  return false;
}
</script>
微信赞赏

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) Responsive Website Template for Academic Papers, Journals, and Books – 1011

(Adaptive Mobile Version) Responsive Website Template for Academic Papers, Journals, and Books – 1011 Practical Collection pbootcms Template

A responsive PbootCMS website template designed for academic journals and book publications, compatible with both PC and WAP devices. Its professional, academic design makes it ideal for journals and academic publishing platforms to showcase their content and services. This template helps academic publishing institutions build an authoritative online presence and attract both authors and readers. Template Demo | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.c...
👁 40
A PHP function that adds or subtracts a specified amount of time from a timestamp and returns the result in a specified format.

A PHP function that adds or subtracts a specified amount of time from a timestamp and returns the result in a specified format. Language Notes PHP PHP and mysql

Here is a PHP function that adds or subtracts a specified amount of time from a timestamp and then outputs the resulting time in a specified format: <?php /** * Adds or subtracts a specified amount of time from a timestamp and outputs the resulting time in a specified format * * @param string $time-Date-time string in the format 'Y-m-d H:i:s' * @param int $seconds-The amount of time to add...
👁 148
(Adaptive Mobile Version) Smart Phone AI Robot Voice Software Website Template – 1012

(Adaptive Mobile Version) Smart Phone AI Robot Voice Software Website Template – 1012 Practical Collection pbootcms Template

PbootCMS website template – an AI-powered smartphone robot voice software solution compatible with both PC and WAP devices. Its cutting-edge design is ideal for showcasing AI voice products, smartphone robots, and technical solutions. This template helps technology companies present their innovative products online, attracting investors and customers. Template Overview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4...
👁 51
(Adaptive Mobile Version) Responsive Cable Switching Power Equipment Website Template – Download (1013)

(Adaptive Mobile Version) Responsive Cable Switching Power Equipment Website Template – Download (1013) Practical Collection pbootcms Template

A responsive PbootCMS website template for cable switch power equipment, compatible with both PC and WAP devices. Featuring a professional, tech-oriented design ideal for showcasing products such as cables, switches, and power equipment. This template helps power equipment manufacturers showcase their products online and attract customers from the power and construction industries. Template Display | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.c...
👁 49
PHP reads the content of a text file line by line, outputs 100 lines at a time, and supports paginated output.

PHP reads the content of a text file line by line, outputs 100 lines at a time, and supports paginated output. Language Notes PHP

You have a TXT file containing one million titles, with one title per line. Each time you access the file, you are passed a `pageid`; when `pageid` is 1, the first to 100 titles in the file are output; when `pageid` is 2, the 101st to 200th titles are output; and so on. The PHP code is also very simple: 🔒 Hidden content: Members can view <?php // Open the title file $ha...
👁 173
Resource website typecho001 template

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...
👁 198