jquery 的$.ajax() 与php后台交互_jquery中ajax和php交互-程序员宅基地

技术标签： ajax与php后台交互 php ajax

看了菜鸟ajax的系列教程：对ajax有了初步的了解，但是我主要是想利用ajax与php做前后台交互的，所以便想着一步步实现这个想法，因为对ajax不是特别熟悉，所以写的都是菜鸟般的代码，见谅。。

看了菜鸟的ajax系列教程，都没有讲到JQuery的$.ajax()方法怎么使用，希望有机会可以加上，让更多读者可以了解。

但是W3School有这一节教程：http://www.w3school.com.cn/jquery/ajax_ajax.asp

JS库和CSS库建议直接使用国内的cdn，省去很多功夫，http://www.bootcdn.cn/

那先来一个简单的交互吧，但是要注意的是在使用ajax与php后台交互的时候，一定要打开服务器，否则很多时候会出现错误，我说打开服务器的意思是，直接在浏览器输入：localhost是可以有效访问的意思。

好了，下面看看JQuery的ajax()与php交互的简单例子吧：

index.html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <!--利用cdn添加js和css库  -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>
<body style="text-align: center; padding: 100px;">

 姓名： <input type="text" name="username" id="yourName" />

<button id="send">提交</button>
<br><br><br><br>

<div id="result">结果：</div>
</body>

<script type="text/javascript">

  $(function () {
      $("#send").click(function () {

          var name = $("#yourName").val();
          var data = "name="+name; //如果后台是$_POST方法获取数据，那么一定要索引（例如：索引name）

           $.ajax({
             type: "POST",
             url: "server.php",  //同目录下的php文件
             data:"name="+name,  // 等号前后不要加空格
            success: function(msg){  //请求成功后的回调函数
              
                $("#result").append("你的名字是"+msg);

            }
        });

      })
  })
 
</script>

</html>

server.php 代码

<?php

	$username = $_POST['name'];//获取索引值
	echo  $username;

?>

本文链接：https://blog.csdn.net/ccccc_Jun/article/details/79132779

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【Spring6】| Bean的生命周期（五步、七步、十步法剖析）-程序员宅基地

文章浏览阅读8.4k次，点赞34次，收藏148次。【Spring6】| Bean的生命周期（五步、七步、十步法剖析）_bean的生命周期

Appium（六）Toast 定位 + Android版本问题的解决以及 Selenium 的安装+屏幕截图_you could still use other supported backends in or-程序员宅基地

文章浏览阅读2.8k次。页面的错误提示 Toast，比如：网络加载问题出现的错误、用户名或者密码输入错误、银行卡密码输入次数提示等错误，这些错误的内容一般都会以浮动的方式显示，而且他们显示的时间非常的有限，可能是几秒钟的时间就会消失掉，不会被点击，无法获取到他们的焦点，但是在 Android 中有一个叫做 Appium Toast 的工具，在 Android 1.6.x 多的时候就已经开始支持识别 Toas..._you could still use other supported backends in order to automate older andr

关于idea将模块修改为Resources报错：Two modules in a project cannot share the same content root.-程序员宅基地

文章浏览阅读1.8k次。点击: file-->Project Structure-->选择：Models----> 右击文件点击Delete最后修改即可_two modules in a project cannot share the same content root

异步FIFO设计-程序员宅基地

文章浏览阅读590次，点赞26次，收藏26次。同步后的写指针与读指针进行比较，如果它们相等或满足其他预定的条件，就表明FIFO为空，从而产生空逻辑信号。产生空状态信号时，实际FIFO中有数据，相当于提前判断了空状态信号，此时不再进行读FIFO数据操作也是安全的。此时经常使用多余的1bit分别当做读写地址的拓展位，来区分读写地址相同的时候，FIFO的状态是空还是满状态。（格雷码是一种二进制编码方式，其相邻的两个数值只有一个位的差异，这种特性使得格雷码在变化时只涉及到一个位的翻转，从而减少了由于多位同时变化可能带来的不稳定性和错误。

Cannot load configuration class_cannot load configuration class: com.jsh.erp.erpap-程序员宅基地

文章浏览阅读3.0k次。将SDK从16设置为1.8，如下图_cannot load configuration class: com.jsh.erp.erpapplication

java csv 复杂表头_POIUtil（动态复杂表头、动态数据、多线程、合并数据列的POI导出成Excel工具附带生成csv文件）...-程序员宅基地

文章浏览阅读426次。package com.sckj.base.util;import java.io.IOException;import java.lang.reflect.Constructor;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import java.ut..._csv能复杂表头吗

随便推点

MediaServerStudioEssentials2017R2版本安装_media server studio community 2017-程序员宅基地

文章浏览阅读1.1k次。安装依赖sudo apt-get install -y preload libpciaccess-dev libpthread-stubs0-devsudo apt-get install -y compizconfig-settings-managersudo apt-get install -y subversion git git-svn gcc g++ make cmake nasms_media server studio community 2017

第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）_ajax实现修改功能-程序员宅基地

文章浏览阅读1.2k次。本讲内容首先讲解jQuery对ajax的支持，分别讲解$.post,$.get,$.ajax等方法，这些方法的参数，使用方法及区别。最后对ajax的综合应用举例：在同一个页面实现新增，修改，删除学校资料，分页列表等功能，前端使用html静态页面，使用MySQL数据库，后台使用servlet技术实现。_ajax实现修改功能

找回word文件的两种密码_word文档保护默认密码是多少-程序员宅基地

文章浏览阅读773次。Word文档的密码也有两种：一种是打开密码，一种是编辑限制两种密码加密后的效果也是不一样的：设置了打开密码的Word文档，是在打开文件的时候需要输入密码，保护文件内容不被其他人看到。当我们输入了正确的word密码，进入到文件之后，就一些都正常了，可以正常阅读、正常编辑word文件。设置了编辑限制的Word文档，打开文件的时候不需要输入密码，打开之后能够查看Word文档内容，但是想要编辑WORD文件的时候，保护文件内容不被修改，需要输入正确的Word密码，将限制编辑取消才能够正常编辑Word文档。两种密码如果_word文档保护默认密码是多少