jquery+ajax+php 实现注册(报名)

简介: jquery+ajax+php 实现注册(报名)

 

index.html

    <form>
        <label>作品类型</label>
        <input id="prodType" type="text" name="" />
        <br>
        <label>作品名称</label>
        <input id="prodName" type="text" name="" />
        <br>
        <label>参加人员</label>
        <input id="member" type="text" name="" />
        <br>
        <label>指导老师</label>
        <input id="teacher" type="text" name="" />
        <br>
        <label>联系电话</label>
        <input id="telephone" type="" name="" />
        <br>
        <label>学校名称</label>
        <input id="school" type="text" name="" />
        <br>
        <button type="button" id="sign">报名</button>
    </form>

js

$('#sign').click(function() {
        alert('sign');
        var prodType = $('#prodType').val();
        var prodName = $("#prodName").val();
        var member = $("#member").val();
        var teacher = $("#teacher").val();
        var telephone = $("#telephone").val();
        var school = $("#school").val();
        if (prodType == '' || prodName == '' || member == '' || teacher == '' || telephone == '' || school == '') {
             alert("所有数据均必填");
         }else{
       if (telephone.length == 11) {
            $.ajax({
                type: "POST",
                url: "testDb.php",
                dataType: "JSON",
                data: {
                    "prodType": prodType,
                    "prodName": prodName,
                    "member": member,
                    "teacher": teacher,
                    "telephone": telephone,
                    "school": school,
                },
                success: function(data) {
                    switch (data) {
                        case 1: //用户已存在
                            alert("报名成功")
                            break;
                        case 0: //注册成功
                            alert("报名失败")
                            break;
                    }
                }
            })
        } else {
            alert('请检查您的联系方式');
        }
      }     
    })

testDB.php

<?php
header("charset=UTF-8");
$prodType = $_POST['prodType'];
$prodName=$_POST['prodName'];
$member=$_POST['member'];
$teacher=$_POST['teacher'];
$telephone=$_POST['telephone'];
$school=$_POST['school'];
$servername = "localhost";
$username = "root";
$password = "root";
$db = "league";
// 创建连接
try {
    $conn = new mysqli($servername, $username, $password,$db);
    $insert = $conn->prepare("INSERT INTO league VALUES (?, ?, ?, ?,?,?)");  
    $insert->bind_param('ssssss', $prodType,$prodName,$member,$teacher,$telephone,$school);  //防止sql注入
    $insert->execute();
    echo 1;
} catch (Exception $e) {
    echo 0;
}

相关文章
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
191 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
316 3
|
XML 前端开发 JavaScript
34 PHP与Ajax
路老师在知乎上分享了关于PHP语言的知识,帮助大家入门并深入了解PHP。本文重点介绍了Ajax技术,包括其概念、开发模式、优点及常用技术,如JavaScript和XMLHttpRequest对象。Ajax通过异步请求改善了用户体验,减轻了服务器负担,实现了页面无刷新更新。
153 1
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
617 1
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
137 1
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
119 1
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
794 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
190 5