1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>JQueryAjax+PHP</title>
  5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  6. </head>
  7. <body>
  8. user name :<input type="text" id="username" name="username" /><br>
  9. password :<input type="password" id="password" name="password" /><br>
  10. <button type="button" class="butn">ajax Submit </button><br>
  11. <span class="con"></span>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $(".butn").click(function(){
  15. var username = $("#username").val();
  16. var password = $("#password").val();
  17. $.post('ajax.php',{name:username,pwd:password},function(data) {
  18. alert(data);
  19. $(".con").html(data);
  20. })
  21. })
  22. })
  23. </script>
  24. </body>
  25. </html>
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
user name :<input type="text" id="username" name="username" /><br>
password :<input type="password" id="password" name="password" /><br>
<button type="button" class="butn">ajax Submit </button><br>
<span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.post('ajax.php',{name:username,pwd:password},function(data) {
alert(data);
$(".con").html(data);
})
})
})
</script>
</body>
</html>

ajax.php:

  1. ajax.php
  2. <?php
  3. echo ' user name :',$_POST['name'],', password :',$_POST['pwd']."<br>";
  4. // Here are some operations , For example, database interaction
  5. echo " Operation completed ";
  6. ?>
ajax.php
<?php
echo ' user name :',$_POST['name'],', password :',$_POST['pwd']."<br>";
// Here are some operations , For example, database interaction echo " Operation completed ";
?>

In Africa json Under format , The background can only return strings , If you want to return an array in the background , May adopt json Format

For example JQueryAjax Change the code in to the following form :

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>JQueryAjax+PHP</title>
  5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  6. </head>
  7. <body>
  8. user name :<input type="text" id="username" name="username" /><br>
  9. password :<input type="password" id="password" name="password" /><br>
  10. <button type="button" class="butn">ajax Submit </button><br>
  11. <span class="con"></span>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $(".butn").click(function(){
  15. var username = $("#username").val();
  16. var password = $("#password").val();
  17. $.ajax({
  18. url: "ajax.php",
  19. type: "POST",
  20. data:{name:username,pwd:password},
  21. dataType: "json",
  22. error: function(){
  23. alert('Error loading XML document');
  24. },
  25. success: function(data,status){// If the php success
  26. alert(status);
  27. alert(data);
  28. $('.con').html(" user name :"+data[0]+" password :"+data[1]);
  29. }
  30. });
  31. })
  32. })
  33. </script>
  34. </body>
  35. </html>
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
user name :<input type="text" id="username" name="username" /><br>
password :<input type="password" id="password" name="password" /><br>
<button type="button" class="butn">ajax Submit </button><br>
<span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "ajax.php",
type: "POST",
data:{name:username,pwd:password},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){// If the php success
alert(status);
alert(data);
$('.con').html(" user name :"+data[0]+" password :"+data[1]);
}
});
})
})
</script>
</body>
</html>

php+ajax+jq More articles about

  1. Native ajax jq Cross domain

    Native js encapsulation ajax // establish XmlhttpRequest object function createXHR(){     var xhr=null;     if(XMLHttpRequest){      ...

  2. Ajax Jq Razor sentence

    1.JS Refresh current page : window.location.reload(); 2.JSon After success, turn to other pages : window.location.href=" To go to the address of the page ( General format :/ Page by ...

  3. Ajax——jq in ajax Use

    Format the form <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. ajax jQ Write the upload progress bar

    XML/HTML Code <form id="myForm" action="upload.php" method="post" e ...

  5. Django---CSRF The decorator ,CSRF The process of ,JSON data format ,ajax technology ( be based on JQ Realization )

    Django---CSRF The decorator ,CSRF The process of ,JSON data format ,ajax technology ( be based on JQ Realization ) I. 1 CSRF Related ornaments from django.utils.decorators import m ...

  6. ajax、fetch、axios — Request data

    jquery ajax jq Of ajax It's about primordial XHR Encapsulation , In addition, it also adds the right JSONP Support for . It's very convenient to use usage : $.ajax({ url: Address to send request , data: Data splicing ,// Send it to the server ...

  7. Tanzhou classroom 25 class :Ph201805201 WEB And Ajax The eighth lesson ( Class notes )

    js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. jq With native js Methods switch to each other

    Recently in use mui Write page , Of course, on the move App In the introduction jq or zepto These frameworks , It must be very irrational . although jq It's simple , But there are also compatibility issues ,js Foundation is very important ,jq My success was due to ie6.7.8.9.10.chrom ...

  9. mui How to use native JavaScript Instead of jquery To operate dom from 【B5 Tutorial network 】:http://www.bcty365.com/content-146-3661-1.html

    Recently in use mui Write page , Of course, on the move App In the introduction jq or zepto These frameworks , It must be very irrational . Native JS It's very simple , Why do I need jq?jq My success was due to ie6.7.8.9.10.chrome.ff These browsers are not compatible ...

Random recommendation

  1. centos7 firewalld

    1.firewalld brief introduction firewalld yes centos7 One of the characteristics of , There are two great advantages : 1. Support dynamic update , No need to restart the service : 2. Added firewall "zone" Concept   firewa ...

  2. C# add to dll After reference , Solutions to add namespace errors

    reason : Class library dll The goal framework of the project is inconsistent with the goal framework of the project , Right click on the item project--〉 attribute ---〉Application Under the tab are “ The target framework ”Target Framewiork,  What I met was the class library ...

  3. Ape question bank iOS Client architecture design

    original text : http://mp.weixin.qq.com/s?__biz=MjM5NTIyNTUyMQ==&mid=444322139&idx=1&sn=c7bef4d439f4 ...

  4. hdparm Test hard disk performance

    <1>Centos install hdparm Test hard disk performance One . install hdparm yum install hdparm -y Linux Study ,http:// linux.it.net.cn Two . Evaluation read ...

  5. Why linear regression You can do it classification

    Output space Wrong measurement Can I use it directly linear regression for classification Send it back as a classifier heuristic( Heuristic : Probe ) Wrong measurement complexit ...

  6. Spring Boot,Spring Data JPA Multi data source support

    1 The configuration file wisely.primary.datasource.driverClassName=oracle.jdbc.OracleDriver wisely.primary.datasource. ...

  7. Android ListView Adapter Of getItemViewType and getViewTypeCount Multiple layouts

     <Android ListView Adapter Of getItemViewType and getViewTypeCount Multiple layouts > stay Android Of ListView in . Suppose it's in a Lis ...

  8. git Theoretical basis

    GIT It is the most advanced and powerful distributed version control system in the world git The three trees maintained are the work area . staging area .git Warehouse work area : It's the temporary storage area where you usually store the project code : For temporary storage of your changes , In fact, it's just a document , preservation ...

  9. ARP Deceptive attack

    One .ARP Attack Overview ARP The attack mainly exists in the local area network , By forging IP Address and MAC Address implementation ARP cheating , Can produce a lot of ARP Traffic is blocking the network , The attacker just keeps sending out fake ARP The response package can change the target host ...

  10. Python —— Advanced features of functions ( section 、 iteration 、 List generator 、 generator 、 iterator )

    One . section (Slice) In many programming languages , There are many interception functions for Strings (i.e.  substring), The goal is to slice strings .python There is no string interception function in , Need to pass through “ section ” To complete . Take a ...