美文网首页
Javascript

Javascript

作者: 佛曰不可说_7d48 | 来源:发表于2020-10-18 21:45 被阅读0次

读操作和写操作, .点是的的意思;


  1.两种数据传输方式:

get / post

get    请求信息会在地址栏显示,跨域一般使用get方法

post    适用于比较隐秘的数据

使用方法(下面都是jq封装的ajax的使用)

$.ajax({

type:"get",    //或者post

url:"forajax.php",

async:true,

dataType:“text”,                //php访问对象文件时一般用text

success:function(data){                  //data固定参数为请求完成后得到的数据

alert(data);

},

complete:function(){              //请求完成后进行的操作

},

})

获取自己的数据库数据,或者php后台处理过的数据这是一个登录功能的js部分 .  有php后台文件,所以必须从服务器的www文件进入页面 。localhost:8080或者直接用ip/xlayzheng/...

$.ajax({

type:"post",

url:"php/login-register.php",  //这是数据传向的php文件

data:{

username:usernameVal,

userpwd:userpwdVal,

type:"login"

},

dataType:"text",

success:function(data){

if (data === "success") {

alert(usernameVal+",欢迎!")

$("#uname").val("");

$("#upwd").val("");

} else{

alert("用户名或密码错误!");

$("#upwd").val("");

}

},

})

--------------------------------------------------php部分---------------------------------------------------------------------

//获取数据

$_username = $_POST['username'];    //什么方法传输的数据就是什么方法接受

$_userpwd = $_POST['userpwd'];

$_type = $_POST['type'];            //传输的data的type属性,用以判断执行哪条语句

//第一步,定义数据库的信息

define("HOST","127.0.0.1"); //定义主机名

define("PORT","3306");      //定义端口号默认3306

define("DB_NAME","root");  //定义数据名用户名

define("DB_PWD","123456");  //定义用户名SQL数据库的密码

define("DB_CON","jenashop");//定义自己要操作的的数据库名

//-------------------------------------------------------------------第二步,创建数据库连接

$_link = new mysqli(HOST,DB_NAME,DB_PWD,DB_CON,PORT);

//------------------------------------------------------------------ 设置字符编码

$_link->set_charset("utf8");

if($_type==="login"){

//-----------------------------------------------------------第三步,创建一条数据库语句

$_sql = 'SELECT userpwd from userinfo WHERE username="'.$_username.'"';

//-----------------------------------------------------------执行查询语句

$_res = $_link->query($_sql);

//----------------------------------------------------------遍历结果集合,即使只有一行也要这一步

$_row = $_res->fetch_row();

//----------------------------------------------------------判断密码是否正确

if($_row[0] == $_userpwd){

echo "success";

}else {

echo "error";

}

//-----------------------------------------------------------释放数据

$_res->free();

}else{

//---------------------------------------------------------  创建语句

$_sqlinsert = 'INSERT into userinfo(username,userpwd) value ("'.$_username.'","'.$_userpwd.'")';

//----------------------------------------------------------执行语句

$_resinsert = $_link->query($_sqlinsert);

//------------------------------------------------------------检查是否执行成功,注意后面是affected_rows

$_r = $_link->affected_rows;

echo $_r;

}

//------------------------------------------------------------------关闭数据库连接

$_link->close();

?>

Ajax跨域获取数据的例子获取到可以请求的地址后,利用Ajax,十分方便取到网站的数据

$(function(){

//输入框内,每次鼠标弹起时,进行搜索,并返回联想商品,与数量

$('.txt').on('keyup',function(){

$.ajax({

type:"get",                          //跨域请求一般用get方式

//天猫的数据地址

url:"https://suggest.taobao.com/sug?code=utf-8&q="+$('.txt').val()+"&_ksTS=1502958378801_4787&callback=jsonp4788&area=b2c&code=utf-8&k=1&bucketid=9&src=tmall_pc&isg=AsnJLVFs9O3EkIh2LbbvIw402PXjvr2QxO1ir2s-RbDvsunEtGbNGLfkgCD_",

//淘宝的数据地址

//url:"https://suggest.taobao.com/sug?code=utf-8&q=手机&_ksTS=1502958214110_1909&callback=jsonp1910&k=1&area=c2c&bucketid=1",

dataType:"jsonp",

jsonp:"callback",                    //百度的为cb,可以在网页数据传输时在地址栏确定不同网站的jsonp值

async:true,

success:function(data){

var res = data.result;

$(".result").html("");

for(var i = 0 ; i

$(".result").append($("

"+res[i][0]+"

约"+res[i][1]+"件相关商品>>

"));

}

}

})

})

//商品搜索链接:

//https://list.tmall.com/search_product.htm?q=%E7%94%B5%E8%84%91&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton

//点击下面的联想商品进入相应页面

$(".result").on("click","li",function(e){

event.stopPropagation();

$(this).children().attr('href',"https://list.tmall.com/search_product.htm?q="+$(this).children().first().html()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");

$(".txt").val( $(this).children().first().html());

$(".result").html("");

})

//点击搜索,进入文本框对应商品的结果页面

$(".search").on("click",function(){

$(".result").html("");

$(this).attr('href',"https://list.tmall.com/search_product.htm?q="+$(".txt").val()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");

})

//点击文本框以外的地方时,取消联想

$(document).on("click",function(){

$(".result").html("");

$(".txt").val("");

})

})

-----------------------------------------------------------html部分----------------------------------------------------------------------

搜  索

    在php文件的编写中,基础的会用到的流程都在上述例子中。

    1.变量的声明是用$符。

    2.数据的接收方法要与传输的方法一致

    3.创建数据连接时。端口号(本例中是PORT)必须是放再最后的。MySQL默认是3306。

    4.设置字符编码也是很重要的,不然可能传输后的数据改变了编码格式,以至于后面的处理判断出现问题。

    5.数据的释放有时会对整个代码的运行产生影响,这个看具体情况。

    6.操作完成后记得要关闭数据库连接

    A . 内容

    1.内置对象--数学(Math)

    2.内置对象--日期(Date)

    B .要点总结

    1.Math (不需要创建,直接调用)

    //Math对象比较特殊,他不需要创建。直接调用内部方法。

    var a = 1.12111116;

    Math.abs();//绝对值。

    console.log(Math.floor(a));//向下取整。

    console.log(Math.ceil(a))//向上取整。

    console.log(Math.round(a));//四舍五入取整。

    Math.random();//0-1随机数。

    document.write(parseInt(Math.random()*100))

    Math.PI;//3.1415926....

    Math.pow();//哪个数的多少次方。

    Math.sqrt();//某个数的平方根

    console.log(getRandomInt(1,9))

    function getRandomInt(min, max) {

    return Math.floor(Math.random() * (max - min + 1) + min);

    }

    2.Date(需要创建)

    //Date对象,代表的是所有和日期有关的信息。就像一个盒子里面放了所有和时间有关的信息

    var date = new Date();

    console.log(date.getDate()      )  //    获取日 1-31

    console.log(date.getDay ()      )  //    获取星期 0-6(0代表周日)

    console.log(date.getMonth ()    )  //  获取月 0-11(1月从0开始)

    console.log(date.getFullYear ()      )  // 获取完整年份(浏览器都支持)

    console.log(date.getHours ()          )  // 获取小时 0-23

    console.log(date.getMinutes ()        )  // 获取分钟 0-59

    console.log(date.getSeconds ()        )  // 获取秒  0-59

    console.log(date.getMilliseconds ()  )  // 获取毫秒 (1s = 1000ms)

    console.log(date.getTime ()          )  //  返回累计毫秒数(从1970/1/1午夜)

    3.字符串方法

    // charAt()        返回指定索引位置的字符

    // fromCharCode()    将 Unicode 转换为字符串

    // charCodeAt()    返回指定索引位置字符的 Unicode 值

    var str = "chansojaoej"

    var str1 ="sunkaisong"

    console.log(str.charAt(2))            //a

    console.log(str.charCodeAt(3))        //101

    console.log(str.concat(str1))        //chansojaoej唐子恒

    // concat()    连接两个或多个字符串,返回连接后的字符串

    // indexOf()    返回字符串中检索指定字符第一次出现的位置

    // lastIndexOf()    返回字符串中检索指定字符最后一次出现的位置

    //join()  将数组链接为字符串

    var arr = [1,2,3,4,5,6]

    console.log(arr)

    console.log(arr.join())  //123456

    console.log(arr.join(" ")) //1 2 3 4 5 6 用空格连接

    //split()  把字符串分割为子字符串数组

    var str1 = "12345,124,46556"

    console.log(str1.split("")) // 不给参数将每个字符进行分隔成数组

    var str="How are you doing today?"

    document.write(str.split(" ") )//How,are,you,doing,today? 给空格,就按空格分割为数组

    document.write(str.split("") )//H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? 不给参数将每个字符进行分隔成数组

    document.write(str.split("",5))//H,o,w, ,a  逐个分隔,并取五个元素

    // slice()    提取字符串的片断,并在新的字符串中返回被提取的部分

    //substr()    从起始索引号提取字符串中指定数目的字符

    console.log(str.substr(3,7))//第一个参数从索引值开始,第二个参数是长度

    //substring()    提取字符串中两个指定的索引号之间的字符

    console.log(str.substring(3,7))

    //toLowerCase()    //把字符串转换为小写

    //toUpperCase()    //把字符串转换为大写

    // trim()    移除字符串首尾空白

    // valueOf()    返回某个字符串对象的原始值

    // toString()    返回字符串对象值

    console.log(str.toString())

    console.log(str.valueOf())

    // match()      找到一个或多个正则表达式的匹配

    // replace()    替换与正则表达式匹配的子串

    // search()    检索与正则表达式相匹配的值

    Angular框架:

    module:

      //http://cdn.code.baidu.com/ cdn库

    // 注册模块 通过module函数,(获取页面中的)

    // 第一个参数是这个模块的名字

    // !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数,如果没有传递第二个参数,angular.module就不是创建一个模块

    // angular.module 返回 刚刚创建的模块对象

    var app=  angular.module('myApp',[]);

    // app.controller 创建一个控制器,所创建的控制器属于myApp模块

    //  app.controller('myCtrl');

    // 控制器函数的参数中有一个$scope

    angular.module('myApp').controller('myController', function($scope) {

    // 当控制器执行时会自动执行的函数

    $scope.user = {};

    $scope.user.name = '';

    // $scope可以往视图中暴露数据,还可以暴露行为

    $scope.show = function() {

    console.log($scope.user);

    };

    })


    // 所有模块都通过 define 来定义

    define(function(require, exports, module){

    // 通过 require 引入依赖

    var$ =require('jquery');

    varSpinning =require('./spinning');

    // 通过 exports 对外提供接口

    exports.doSomething = ...

    // 或者通过 module.exports 提供整个接口

    module.exports = ...

    });


    兼容性

    margin兼容性问题

    display:inline-block

    IE6 最小高度问题

    IE6 双边距

    li里元素都浮动 li 在IE6 7  下方会产生4px间隙问题

    浮动元素之间注释,导致多复制一个文字问题

    IE6 7 父级元素的overflow:hidden 是包不住子级的relative

    IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差

    IE6下绝对定位元素和浮动元素并列绝对定位元素消失

    IE6 下input的空隙






    相关文章

    网友评论

        本文标题:Javascript

        本文链接:https://www.haomeiwen.com/subject/otoojxtx.html