onChange to Ajax Return Value

jQuery AJAX
回覆文章
yehlu
Site Admin
文章: 3244
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

onChange to Ajax Return Value

文章 yehlu »

form.php

代碼: 選擇全部



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
input<input type='text' name='input01' id='input01' onChange='input01change(this.value)' size='20'>
<br>
return<input type='text' name='return01'  id='return01' readonly size='20'>
<script>
function input01change(session) {
  $.ajax({
       url: 'ajax.php',
       type: 'GET',
       data: {k : session},
       success: function( output ) {
           console.log("Ajax Send "+ session);
           console.log("Ajax Return Data "+ output);
           $("#return01").val(output);
       }
   });
}
</script>
</body>

ajax.php

代碼: 選擇全部

<?php
$dsn = "mysql:host=localhost;dbname=test";
$db = new PDO($dsn, 'root', 'password');
$rs = $db->query("SELECT * FROM c_zipcode where id = '".$_GET['k']."' ");
$row = $rs->fetch();
echo $row['name'];

yehlu
Site Admin
文章: 3244
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: onChange to Ajax Return Value

文章 yehlu »

form.php

代碼: 選擇全部



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
input<input type='text' name='input01' id='input01' onChange='input01change(this.value)' size='20'>
<br>
return01<input type='text' name='return01'  id='return01' readonly size='20'><br>
return02<input type='text' name='return02'  id='return02' readonly size='20'>
<script>
function input01change(session) {
  $.ajax({
       url: 'ajax.php',
       type: 'GET',
       dataType: "json",
       data: {k : session},
       success: function( output ) {
           console.log("Ajax Send "+ session);
           console.log("Ajax Return Data "+ output);
           $("#return01").val(output.name);
           $("#return02").val(output.zipcode);           
       }
   });
}
</script>
</body>

ajax.php

代碼: 選擇全部

<?php
$dsn = "mysql:host=localhost;dbname=test";
$db = new PDO($dsn, 'root', 'password');
$rs = $db->query("SELECT * FROM c_zipcode where id = '".$_GET['k']."' ");
$row = $rs->fetch();
//echo $row['name'];
echo json_encode($row );
回覆文章

回到「jQuery」