PHP + MySQL 学习笔记（十三）--- JavaScript 、jQuery 与 PHP 的 AJAX 資料传输，JSON 与 FormData 的即时应用

最新推荐文章于 2023-06-07 11:51:58 发布

READ LEE

最新推荐文章于 2023-06-07 11:51:58 发布

阅读量145

点赞数 1

文章标签： ajax jquery html php javascript

本文链接：https://blog.csdn.net/weixin_45889834/article/details/117017415

版权

承接上一篇 ”PHP + MySQL 学习笔记（十三）“

这一篇主要围绕在 Form、 FormData 和 JSON

在資料传输方面，HTML 主要是应用表单（form）来完成。这个过程是

form 里面要设定 name=” ",
要设定 method= “get” 或 “post”
要设定 action =“ 需要跳转的HTML 或 php”
form 的项目要有一个 type=“submit” 的 button。
当mouse 点击 button， form 就会把范围内的資料打包，用 post 或 get 传到自定的页面。

不过，当我们利用 Ajax 在 JavaScript 里面运作时，问题就发生了。
在 jQuery 里面我们会用 “事件” 来侦测一个 button 的执行，譬如： click。

$("#butupdate").click(function(event) {
   $.post("ajaxrtn_dsu_1.php",
   		{data: ”fomr的 name“},
   		function(result){
      		alert('in .post result == ' + result);
      		$("#txtHint").html(result);
    })
});

在这里插入图片描述
实际操作的结果却不理想，因为，Ajax 的操作没有换页，form 的内容就没有人帮忙打包。

FormData – JavaScript 的 API

在这里插入图片描述

在创建一个新的 FormData 后，用 get 取得每一个元素的值，并存进 JSON 的结构里。

 var formdata=new FormData(document.getElementById("form_srch"));
  <?php // 把 form 的資料放进 JSON 里面
     for ($i=0; $i < count($colm_name) ; $i++) { 
      echo 'JS_Obj.'.$colm_name[$i].'= formdata.get("'.$colm_name[$i].'_srch");'; ?>
        }

JSON 对 JavaScript 的操作而言，就是把 obj/ array 变成一组特别的字串。因为是一个，所以就可以透过 AJAX 传出去。

在JavaScript里使用点号“.” 加名称来取出，譬如
var x = JSON.conponent;
JSON.conponent = value;

var JSTR= JSON.stringify(value[, replacer[, space]]);

PHP 取出 JSON，箭头后面不能有空格

下列程式中， “x” 和 “》” 之间不能有空白间隔

$formdata= $_POST["Dcolumn_s"]; 
$currStatus = json_decode($formdata);
$job2do = $currStatus ->x1 ;
$DB_name =$currStatus ->x2 ;

页面跳转频繁，資料最好是利用 PHP 存在 JSON 档案中

把 JSON 資料存入档案中

$json_encd = json_encode($currStatus);
file_put_contents("../JSON/curstatus.json", $json_encd);

从档案中载入 JSON

$file = file_get_contents("../JSON/curstatus.json");
$currStatus = json_decode($file);

在 JavaScript 里面插入 PHP 程式，用 echo 输出后，就变成变动的 JavaScript 程式

 $("input:submit").click(function(){ 
     // alert("input:submit"); 
    <?php //用PHP做成 JSON資料格式

      $JSobj ='var JS_Obj = {';
      for ($i=0; $i < count($colm_name) ; $i++) { 
           $JSobj .= $colm_name[$i].':" n",';
        }
     $JSobj = chop($JSobj,',').'};';
     echo $JSobj ;
   ?>
    var formdata=new FormData(document.getElementById("form_ajaxins"));

  <?php // 把 form 的資料放进 JSON 里面
     for ($i=0; $i < count($colm_name) ; $i++) { 
      echo 'JS_Obj.'.$colm_name[$i].'= formdata.get("'.$colm_name[$i].'_ins");';
        }  

   ?>
  var gfg= JSON.stringify(JS_Obj); //把 JSON变成字串，方便传输
    
  $.post('ajaxrtn_test_2.php',
        { data: gfg    },
        function(data){
          //alert("return:"+ data);
          $('#ajaxrtn_disp').html(data);
         // alert(data);
         
        });

       alert("post finished");

      /*********END************/
  });

在 HTML 中插入 PHP 程式，就可以产生随参数不同可变换页面格式

<?php include("../api/sub_ZRQ_header.php");     ?>
<body onload="MM_preloadImages('../images/btn/loginmap.png','../images/btn/searchdata.png','../images/btn/insertdata.png','../images/btn/modifydata.png','../images/btn/deletdata.png')">
<?php include("../api/sub_ZRQ_title.php");     ?>
<?php include("../api/sub_top_html.php");     ?>
<link href="../css/insert.css" rel="stylesheet" type="text/css">
<div class="main-box">  <!-- login table -->
<?php 
  if ($job2do =="add"){include("OPT_insert_html.php");}
   if ($job2do =="delete") {include("OPT_dsu_html.php");} //删除</option>
    if ($job2do =="update"){include("OPT_dsu_html.php");} //修改</option>
     if ($job2do =="search"){include("OPT_dsu_html.php");}//搜寻</option>
 ?>
 </div>
<?php include("../api/sub_foot_html.php");     ?>
</body>
</html>

---- 本文结束