javascript 如何高效写代码?

291 2024-03-27 17:21

一、javascript 如何高效写代码?

JavaScript包含各种对典型编程思想有用的一些技巧,在实际开发中,我们通常希望减少代码行数;因此,今天这些技巧代码希望可以帮助到你。

1、与Javascript对象相关的

1)、对象解构

将对象的值解构为变量是另一种在传统点表示法之外读取其值的方法。

下面的示例比较了用于读取对象值的经典点表示法和对象解构快捷方式。

const restaurant = {
  name: "Classico Italiano",
  menu: ["Garlic", "Bread", "Salad", "Pizza", "Pasta"],
  openingHours: {
    friday: { open: 11, close: 24 },
    saturday: { open: 12, close: 23 },
  },
};
// Longhand
console.log("value of friday in restaurant:", restaurant.openingHours.friday);
console.log("value of name in restaurant:", restaurant.name);
// Shorthand
const { name, openingHours } = restaurant;
const { openingHours: { friday } } = restaurant;
//we can go further and get the value of open in friday
const { openingHours: { friday: { open } } } = restaurant;
console.log(name, friday, open);

2)、Object.entries()

Object.entries() 是 ES8 中引入的一项功能,它允许您将文字对象转换为键/值对数组。

const credits = {
  producer: "Open Replay",
  editor: "Federico",
  assistant: "John",
};
const arr = Object.entries(credits);
console.log(arr);
Output: [
  ["producer", "Open Replay"],
  ["editor", "Federico"],
  ["assistant", "John"],
];

3)、Object.values()

Object.values() 也是 ES8 中引入的新特性,与 Object 具有类似的功能。entries() 但这没有关键部分:

const credits = {
  producer: "Open Replay",
  editor: "Federico",
  assistant: "John",
};
const arr = Object.values(credits);
console.log(arr);
Output: ["Open Replay", "Federico", "John"];

4)、对象循环速记

传统的 JavaScript for 循环语法是 for (let i = 0; i < x; i++) { … }。通过引用迭代器的数组长度,此循环语法可用于遍历数组。共有三个 for 循环快捷方式,它们提供了用于遍历数组中的对象的各种方法:

for…of 创建一个循环遍历内置字符串、数组和类似数组的对象,甚至是 Nodelist

for...in 在记录属性名称和值的字符串时访问数组的索引和对象文字上的键。

Array.forEach 使用回调函数对数组元素及其索引执行操作

const arr = ["Yes", "No", "Maybe"];
// Longhand
for (let i = 0; i < arr.length; i++) {
  console.log("Here is item: ", arr[i]);
}
// Shorthand
for (let str of arr) {
  console.log("Here is item: ", str);
}
arr.forEach((str) => {
  console.log("Here is item: ", str);
});
for (let index in arr) {
  console.log(`Item at index ${index} is ${arr[index]}`);
}
// For object literals
const obj = { a: 1, b: 3, c: 5 };
for (let key in obj) {
  console.log(`Value at key ${key} is ${obj[key]}`);
}

5)、对象属性简写

在 JavaScript 中定义对象字面量让生活变得更轻松。ES6 在为对象赋予属性方面提供了更多的简单性。如果变量名和对象键相同,则可以使用速记符号。

通过在对象字面量中声明变量,您可以在 JavaScript 中快速将属性分配给对象。为此,必须使用预期的键命名变量。这通常在您已经有一个与对象属性同名的变量时使用。

const a = 1;
const b = 2;
const c = 3;
// Longhand
const obj = {
  a: a,
  b: b,
  c: c,
};
// Shorthand
const obj = { a, b, c };

6)、Javascript For 循环

如果你想要简单的 JavaScript 并且不想依赖第三方库,这个小技巧很有用。

// Longhand:
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++) { /* something */ }
// Shorthand:
for (let fruit of fruits) { /* something */  }

如果您想访问文字对象中的键,这也适用:

const obj = { continent: "Africa", country: "Ghana", city: "Accra" };
for (let key in obj) console.log(key); // output: continent, country, city

7)、Array.forEach 的简写:

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 4, 6].forEach(logArrayElements);
// a[0] = 2
// a[1] = 4
// a[2] = 6

2、与Javascript数组相关的

1)、数组解构

ES6 的一个有趣的新增功能是解构赋值。解构是一种 JavaScript 表达式,可以将数组值或对象属性分离到单独的变量中。换句话说,我们可以通过从数组和对象中提取数据来将数据分配给变量。

const arr = [2, 3, 4];
// Longhand
const a = arr[0];
const b = arr[1];
const c = arr[2];
// Shorthand
const [a, b, c] = arr;

2)、Spread Operator

得益于 ES6 中引入的展开运算符,JavaScript 代码使用起来更加高效和愉快。它可以代替特定的数组函数。展开运算符中有一系列的三个点,我们可以用它来连接和克隆数组。

const odd = [3, 5, 7];
const arr = [1, 2, 3, 4];
// Longhand
const nums = [2, 4, 6].concat(odd);
const arr2 = arr.slice();
// Shorthand
const nums = [2, 4, 6, ...odd];
const arr2 = [...arr];

与 concat() 函数不同,您可以使用扩展运算符将一个数组插入另一个数组中的任意位置。

const odd = [3, 5, 7];
const nums = [2, ...odd, 4, 6]; // 2 3 5 7 4 6

3、与Javascript字符串相关

1)、多行字符串

如果您曾经发现自己需要在代码中编写多行字符串,那么您可以这样写:

// Longhand
const lorem =
  "Lorem, ipsum dolor sit amet" +
  "consectetur adipisicing elit." +
  " Quod eaque sint voluptatem aspernatur provident" +
  "facere a dolorem consectetur illo reiciendis autem" +
  "culpa eos itaque maxime quis iusto quisquam" +
  "deserunt similique, dolores dolor repudiandae!" +
  "Eaque, facere? Unde architecto ratione minus eaque" +
  "accusamus, accusantium facere, sunt" +
  "quia ex dolorem fuga, laboriosam atque.";

但是有一种更简单的方法,只需使用反引号即可完成。

// Shorthand:
const lorem = `Lorem, ipsum dolor sit amet
 consectetur adipisicing elit.
 Quod eaque sint voluptatem aspernatur provident
 facere a dolorem consectetur illo reiciendis autem
 culpa eos itaque maxime quis iusto quisquam
 deserunt similique, dolores dolor repudiandae!
 Eaque, facere? Unde architecto ratione minus eaque
 accusamus, accusantium facere, sunt
 quia ex dolorem fuga, laboriosam atque.`;

2)、将字符串转换为数字

您的代码可能偶尔会收到必须以数字格式处理的字符串格式的数据。这不是一个大问题;我们可以快速转换它。

// Longhand
const num1 = parseInt('1000');
const num2 = parseFloat('1000.01')
// Shorthand
const num1 = +'1000'; //converts to int datatype
const num2 = +'1000.01'; //converts to float data type

3)、模板文字

我们可以在不使用 (+) 的情况下将许多变量附加到字符串中。模板文字在这里派上用场。用反引号包裹你的字符串,用 ${ } 包裹你的变量,以利用模板文字。

const fullName = "Ama Johnson";
const job = "teacher";
const birthYear = 2000;
const year = 2025;
// Longhand
const Fullstr =
  "I am " + fullName + ", a " + (year - birthYear) + " years old " + job + ".";
// Shorthand
const Fullstr = `I am ${fullName}, a ${year - birthYear} years old ${job}. `;

模板字面量为我们省去了许多使用 + 运算符连接字符串的麻烦。

4、与指数有关的

1)、指数幂速记

将第一个操作数乘以第二个操作数的幂的结果是求幂运算符 ** 返回的结果。它与 Math.pow 相同,只是 BigInts 也被接受为操作数。

// Longhand
Math.pow(2, 3); //8
Math.pow(2, 2); //4
Math.pow(4, 3); //64
// Shorthand
2 ** 3; //8
2 ** 4; //4
4 ** 3; //64

2)、十进制底指数

这个可能以前见过。本质上,这是一种写整数的奇特方法,没有最后的零。例如,表达式 1e8 表示 1 后跟八个零。它表示十进制基数 100,000,000,JavaScript 将其解释为浮点类型。

// Longhand
for (let i = 0; i < 10000000; i++) { /* something */ }
// Shorthand
for (let i = 0; i < 1e7; i++) { /* something */ }
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
1e6 === 1000000;
1e7 === 10000000;
1e8 === 100000000;

5、其他操作的 JavaScript 简写

1)、短路评估

短路评估也可以替代 if...else 子句。当变量的预期值为 false 时,此快捷方式使用逻辑或运算符 || 为变量提供默认值。

let str = "";
let finalStr;
// Longhand
if (str !== null && str !== undefined && str != "") {
  finalStr = str;
} else {
  finalStr = "default string";
}
// Shorthand
let finalStr = str || "default string"; // 'default string'

2)、默认参数

if 语句用于定义函数参数的默认值。在 ES6 中,您可以在函数声明本身中定义默认值。如果没有传递任何值或未定义,则默认函数参数允许使用默认值初始化参数。

以前都是在函数体中测试参数值,如果没有定义就赋值。

默认情况下,JavaScript 中的函数参数是未定义的。然而,设置不同的默认设置通常是有利的。在这里,默认设置可能很有用。

// Longhand
function volume(a, b, c) {
  if (b === undefined) b = 3;
  if (c === undefined) c = 4;
  return a * b * c;
}
// Shorthand
function volume(a, b = 3, c = 4) {
  return a * b * c;
}

3)、隐式返回函数

我们经常使用关键字 return 来指示函数的最终输出。单语句箭头函数将隐式返回其计算结果(该函数必须省略方括号 {} 才能这样做)。

对于多行语句,例如表达式,我们可以将返回表达式包裹在括号 () 中。

function capitalize(name) {
  return name.toUpperCase();
}
function add(numG, numH) {
  return numG + numH;
}
// Shorthand
const capitalize = (name) => name.toUpperCase();
const add = (numG, numH) => numG + numH;
// Shorthand TypeScript (specifying variable type)
const capitalize = (name: string) => name.toUpperCase();
const add = (numG: number, numH: number) => numG + numH;

4)、声明变量

在函数的开头声明变量赋值是个好主意。这种精简方法可以帮助您在一次创建大量变量时节省大量时间和空间。

// Longhand
let x;
let y;
let z = 3;
// Shorthand
let x, y, z=3;

但是,请注意,出于易读性考虑,许多人更喜欢用手写方式声明变量。

5)、可选链接

我们可以使用点表示法访问对象的键或值。我们可以通过可选链接更进一步并读取键或值,即使我们不确定它们是否存在或是否已设置。如果键不存在,则可选链接的值未定义。

下面是一个可选链的例子:

const restaurant = {
  details: {
    name: "Classico Italiano",
    menu: ["Garlic", "Bread", "Salad", "Pizza"],
  },
};
// Longhand
console.log(
  "Name ",
  restaurant.hasOwnProperty("details") &&
    restaurant.details.hasOwnProperty("name") &&
    restaurant.details.name
);
// Shorthand
console.log("Name:", restaurant.details?.name);

6)、双位非运算符

JavaScript 中的内置 Math 对象通常用于访问数学函数和常量。一些函数提供了有用的技术,让我们可以在不引用 Math 对象的情况下调用它们。

例如,我们可以通过使用两次按位非运算符来获得整数的 Math.floor() ~~。

const num = 7.5;
// Longhand
const floorNum = Math.floor(num); // 7
// Shorthand
const floorNum = ~~num; // 7

写在最后

这些是已被证明的一项宝贵技巧,因为它简洁明了,使编码变得有趣并且代码行易于记忆。但是请记住,它们的使用不能以牺牲代码的其他方面为代价。

二、jsp和javascript操作cookie区别?

给你一个思考的方式:jsp:服务端执行js:客户端执行cookie:游走在客户端与服务端所以,你可以把cookie看成一种参数传递的方式,至于传递的方向,看你的需求了。

三、求Javascript代码?

<html>

<head>
  <meta charset="UTF-8">
  <title>LuckyMan Demo</title>
</head>

<body>
  <!-- 添加 LuckyMan 列表 -->
  <ul id="luckyManList"></ul>

  <hr>

  <!-- 用户输入表单 -->
  <label for="nameInput">Name:</label>
  <input type="text" id="nameInput">
  <br>
  <label for="numberInput">Number:</label>
  <input type="number" id="numberInput">
  <br>
  <input type="button" value="Add LuckyMan" id="addButton">

  <hr>

  <!-- 显示 LuckyMan 信息 -->
  <h2>LuckyMan Details</h2>
  <p>Name: <span id="nameOutput"></span></p>
  <p>Number: <span id="numberOutput"></span></p>

  <script>
    const name = 'Lucky';

    function LuckyMan(luckyNumber) {
      this.name = name;
      this.luckyNumber = luckyNumber;
      this.displayInfo = function() {
        console.log(this.name + ": " + this.luckyNumber);
      }
    }

    const data = [];
    for (let i = 0; i < 10; i++) {
      const luckyNumber = Math.floor(Math.random() * 100); // 生成随机幸运数
      const luckyMan = new LuckyMan(luckyNumber);
      data.push(luckyMan);
    }

    // 遍历数组并在网页中显示
    const list = document.getElementById('luckyManList');
    data.forEach(item => {
      const listItem = document.createElement('li');
      const content = document.createTextNode(item.name + ": " + item.luckyNumber);
      listItem.appendChild(content);
      list.appendChild(listItem);
    });

    // 获取用户输入
    const nameInput = document.getElementById('nameInput');
    const numberInput = document.getElementById('numberInput');
    const addButton = document.getElementById('addButton');

    // 添加 LuckyMan
    addButton.addEventListener('click', () => {
      const luckyNumber = parseInt(numberInput.value);
      const luckyMan = new LuckyMan(luckyNumber);
      data.push(luckyMan);
      const listItem = document.createElement('li');
      const content = document.createTextNode(luckyMan.name + ": " + luckyMan.luckyNumber);
      listItem.appendChild(content);
      list.appendChild(listItem);
    });

    // 显示 LuckyMan 信息
    const nameOutput = document.getElementById('nameOutput');
    const numberOutput = document.getElementById('numberOutput');
    list.addEventListener('click', (event) => {
      const selectedItem = event.target;
      const selectedItemText = selectedItem.textContent;
      const selectedIndex = selectedItemText.indexOf(':');
      const selectedName = selectedItemText.substring(0, selectedIndex);
      const selectedLuckyNumber = parseInt(selectedItemText.substring(selectedIndex + 2));
      nameOutput.textContent = selectedName;
      numberOutput.textContent = selectedLuckyNumber;
    });

  </script>

</body>

</html>

在这个示例中,我们先创建了 LuckyMan 原型构造函数及其实例,并将实例存储在 data 数组中。然后,我们使用 DOM 操作在页面上动态创建一个列表,并将 data 数组中的每个实例的信息显示在列表中。接着,在页面上添加了一个用户输入表单,用户可以在此输入姓名和幸运数,点击“Add LuckyMan”按钮将 LuckyMan 实例添加到列表中。最后,在页面上显示了一个 LuckyMan 信息区域,当用户点击列表项时,此区域会显示所选 LuckyMan 的姓名和幸运数。以上代码仅做参考,您可以根据需要进行修改和补充。

四、编写JSP时可以用到Javascript吗?

答:jsp中java代码可以写在js中。

示例如下:

<script type="text/javascript">

function check(){

var username=document.getElementById("username");

var username=document.getElementById("password");

//java代码块

<%

String sql="select * from Manger";

String user;

String pass;

ResultSet rs=DBHelper.query(sql);//sql代码已经写好在被的类中,此处为直接调用!!

while(rs.next()){

user=rs.getString("username");

pass=rs.getString("password");%>

if(username.value=="<%=user %>" &&passsword.value=="<%=pass%>")

{

return true;

}else if(username.value==""|| password.value==""){

username.setCustomValidity("账号或密码不能为空");

return false;

}else{

username.setCustomValidity("账号或密码错误,请从新输入");

return false;

}

<%

}

%>

}

</script>

五、javascript 代码

JavaScript 代码 编写指南

在软件开发领域中,JavaScript 是一种广泛使用的编程语言,用于创建交互式网页和 Web 应用程序。如果您希望成为一名优秀的前端开发人员,掌握优秀的JavaScript 代码编写技能至关重要。本文将为您提供一些有关如何编写高效 JavaScript 代码的指南。

1. 精简和模块化

在编写 JavaScript 代码时,尽量保持代码精简和模块化。这包括避免重复代码,使用函数和类来组织代码,并将代码分成小模块以提高可维护性。

2. 使用命名规范

良好的命名规范可以使您的JavaScript 代码更易于阅读和理解。使用有意义的变量和函数名,避免使用缩写或无意义的命名。

3. 避免全局变量

全局变量可能导致命名冲突和不必要的耦合。尽量将变量限制在局部作用域中,使用模块化的方式来管理依赖关系。

4. 错误处理

确保您的JavaScript 代码具有健壮的错误处理机制。使用 try-catch 块捕获异常,避免程序崩溃,并为用户提供友好的错误提示。

5. 代码注释

在编写代码时,务必添加适当的注释。注释可以帮助其他开发人员理解您的代码逻辑,同时也可以帮助您在以后回顾代码时更快地理解。

6. 优化性能

优化JavaScript 代码的性能是至关重要的。避免循环中的频繁操作,可以使用适当的数据结构和算法来提高性能。

7. 学习框架和库

除了纯粹的 JavaScript 编程技能外,还应该学习流行的 JavaScript 框架和库,如 React、Angular 或 Vue。这些工具可以帮助您更高效地开发 Web 应用程序。

8. 不断学习和实践

JavaScript 是一门不断发展的语言,不断学习和实践是精通JavaScript 代码编写的关键。参与开源项目、阅读优秀的代码,并尝试解决实际问题。

结语

通过遵循上述指南,您可以编写出更加高效、可维护和可扩展的JavaScript 代码。不断提升自己的编程技能,并尝试探索新的领域,将使您成为一名优秀的前端开发人员。

六、用Emacs编辑Javascript代码靠什么缩进代码?

好像一定要这样才比较灵活和比较兜底。符合较一般的用法以及在其他编辑器中的习惯。

(global-set-key (kbd "C->") 'indent-rigidly-right-to-tab-stop)(global-set-key (kbd "C-<") 'indent-rigidly-left-to-tab-stop)

否则的话用鼠标框选代码之后按一下TAB,选中的代码就都没有了。否则的话即便用C-x Tab也是不成立的,C-x会把鼠标选中的代码都剪切掉。

七、javascript、JSP、JS有什么区别和联系?

js是javascript的缩写。以下是JSP与JS的区别和联系:

名字:JS:JavaScriptJSP:Java Server Pages

执行过程:JSP先翻译,翻译成Servlet执行如: test.jsp 要变成 test_jsp.java 然后编译成 test_jsp.class而 test_jsp.java 本身就是一个servlet.所以 jsp只是servlet的一个变种,方便书写html内容才出现的。servlet是根本,所有jsp能做的,servlet全能做。

JS:是一种基于对象的客户端脚本语言。目的是解决服务器端语言。如:Perl,遗留的速度问题,为客户提供更流畅的浏览效果。JS可以直接嵌入到html代码中进行解析执行,非常简单易学,可以产生很多动态的效果。

形象比较:JS是在客户端执行的,需要浏览器支持JavaScript。JSP是在服务器端执行的,需要服务器上部署支持Servlet的服务器程序。JS代码能够直接从服务器上download得到,对外是可见的,jsp(和翻译后的Servlet代码)是对外不可见的。

JS和JSP相比较:虽然JS可以再客户端动态生成HTML,但是很难与服务器交互,因此不能提供复杂的服务。如:访问数据库和图像处理等等。JSP在HTML中用<% %>里面实现。JS在HTML中用<Scrippt></Script>实现。

执行过程:JSP:1、JSP文件在用户第一次请求时,会被编译成Servlet,然后由这个Servlet处理用户的请求,所以Servlet可以看成是运行时的Servlet。

2、JSP容器也就是Servlet容器管理JSP页面生命周期分为两个阶段,即转换阶段和执行阶段。

3、转换阶段:当有一个对JSP页面的请求到来时,JSP容器检查JSP页面的语法是否正确,将JSP页面转换为Servlet源文件,然后调用javac命令编译Servlet源文件生成字节码文件。

4、执行阶段:Servlet容器加载转换后的Servlet类。JS:JavaScript 通常是运行在前台,即运行于用户浏览器的,通常不需要服务器的后台支持(AJAX交互例外),混合在HTML中的JavaScript脚本程序直接被浏览器解释执行,以提高页面的美观性和UI操作响应速度为基本目标。

运行位置不同:JSP运行在后台服务器上,混合在HTML中的java程序段用于控制HTML的动态生成,并且通常负责调用后台数据库中的数据,形成能够根据使用情况的变化的,具有丰富数据交互效果的页面。

扩展资料:

JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。

JSP技术有点类似ASP技术,它是在传统的网页HTML(标准通用标记语言的子集)文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件,后缀名为(*.jsp)。 用JSP开发的Web应用是跨平台的,既能在Linux下运行,也能在其他操作系统上运行。

八、jsp的java代码怎么写

在开发基于 Java 的 Web 应用程序时,以 JSP(JavaServer Pages)为基础的页面通常是非常重要的组成部分。JSP 允许开发人员将静态页面内容与动态 Java 代码结合在一起,从而实现动态生成网页内容的功能。在本文中,我们将深入探讨在 JSP 文件中编写 Java 代码的最佳实践。

为什么在 JSP 中编写 Java 代码

在许多 Web 应用程序中,需要根据用户请求动态生成页面内容。这就是 JSP 的用武之地。通过在 JSP 文件中嵌入 Java 代码,开发人员可以轻松地在页面中插入动态数据、执行业务逻辑和控制页面流程。这为开发响应迅速且功能丰富的 Web 应用程序提供了便利。

JSP 的 Java 代码怎么写

在 JSP 文件中编写 Java 代码非常简单。一般来说,您可以通过使用 <% %> 标记将 Java 代码直接嵌入到 JSP 页面中。以下是一个简单的示例,展示了如何在 JSP 文件中输出 Hello World:

<% out.println("Hello World"); %>

在上面的示例中,out 是一个 JSP 隐含对象,用于向客户端输出文本。您可以直接调用其 println 方法输出指定的文本内容。这使得在 JSP 文件中输出动态内容变得非常容易。

在 JSP 中引入 Java 类

除了直接在 JSP 文件中编写简单的 Java 代码之外,您还可以引入外部的 Java 类来处理更复杂的业务逻辑。要在 JSP 中使用自定义 Java 类,您可以通过以下步骤实现:

  1. 将 Java 类编译为 .class 文件。
  2. 将 .class 文件放置在 WEB-INF/classes 目录下。
  3. 在 JSP 文件中使用 <%@ page import="com.example.CustomClass"%> 声明引入类。
  4. 实例化并调用引入的 Java 类。

通过引入自定义 Java 类,您可以将处理业务逻辑的复杂性从 JSP 页面中剥离出来,使代码更易于管理和维护。

避免在 JSP 中过多使用 Java 代码

尽管在 JSP 文件中编写 Java 代码非常方便,但过度依赖 Java 代码可能导致页面逻辑混乱、难以维护。为了更好地组织和管理代码,建议遵循以下最佳实践:

  • 将复杂的业务逻辑封装在 Java 类中,减少在 JSP 中直接编写复杂代码。
  • 避免在 JSP 中处理过多的控制逻辑,将必要的控制转移至后端处理。
  • 尽可能将页面展示逻辑与业务逻辑分离,实现视图和业务的清晰分离。

通过合理地控制在 JSP 文件中的 Java 代码量,可以使代码结构更清晰、逻辑更清晰,提高代码的可维护性和可扩展性。

总结

在开发基于 Java 的 Web 应用程序时,如何在 JSP 文件中编写 Java 代码是一个重要且常见的问题。通过本文的介绍,您应该对在 JSP 文件中编写 Java 代码有了更深入的了解。记住在 JSP 文件中谨慎编写 Java 代码,并遵循最佳实践,可以帮助您开发出结构清晰、易于维护的 Web 应用程序。

九、jsp常用按键代码?

jsp的按钮应该就这两种button和submit

button:可以对返回的数据进行格式化,反应到页面上,可以用form表单序列化提交也可以不用form表单提

submit:专用于form表单提交,无法对返回的数据进行格式化,必须form表单提交

十、如何使用javascript获取网页(jsp)上的文字内容?

感谢提问!欢迎关注本人头条号!

1、简单的jsoup爬取

String url="a.atimo.cn";//静态页面链接地址

Document doc = Jsoup.connect(url).userAgent("Mozilla").timeout(4000).get();

if(doc!=null){

Elements es = doc.select("div.comments>ul>li");//

System.out.println(es);

if(es!=null && es.size()>0){

for (Element element : es) {

String link = element.select("div>h3").attr("href");

String title = element.select("div>h3").text();

String author = element.select("div.c-abstract>em").text();

String content = element.select("dd>a>div.icos>i:eq(1)").text();

}

}

}

通过jsop解析返回Document 使用标签选择器,选择页面标签中的值,即可获取页面内容。

2.延时加载,有些网站存在延时加载,表格内容,或者嵌入页面形式的加载的页面

//构造一个webClient 模拟Chrome 浏览器

String url = "https://www.cnblogs.com/atimo/";

WebClient webClient = new WebClient(BrowserVersion.CHROME);

//支持JavaScript

webClient.getOptions().setUseInsecureSSL(true);

webClient.getOptions().setJavaScriptEnabled(true);

webClient.getOptions().setCssEnabled(false);

webClient.getOptions().setActiveXNative(false);

webClient.getOptions().setCssEnabled(false);

webClient.getOptions().setThrowExceptionOnScriptError(false);

webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);

webClient.getOptions().setTimeout(3000000);

HtmlPage rootPage = webClient.getPage(url);

String html = rootPage.asXml();

Document document = Jsoup.parse(html);

Elements es = document.select("div.comments");//.select("#content_left");

System.out.println(es);

if(es!=null && es.size()>0){

for (Element element : es) {

String link = element.select("div.f13>a").attr("href");

String title = element.select("div>h3>a").text();

String text = element.select("div.c-abstract>em").text();

}

}

获取到的是Document 使用标签选择器,选择页面标签中的值,即可获取页面内容。

3.获取评论或其他内容,返回json数据;js请求

普通请求,只需要使用

HttpURLConnection connection = createRequest(url, "GET");

  // 建立实际的连接 connection.connect();

发送GET请求过去json数据后解析即可;

4.js请求带请求头参数(部分为移动端请求)

CloseableHttpClient https = HttpClients.createDefault();

String url = "https://action=hene=124&devicetype=androidlag=zh_CN&nettyene=3&pass_ticwx_header=1";

HttpGet httpPost = new HttpGet(url);

httpPost.addHeader("Host", "

mp.weixin.qq.com

");

httpPost.addHeader("x-wechat-uin", wechartCookie.getUin());

httpPost.addHeader("x-", "参数");

HttpResponse response = https.execute(httpPost);

HttpEntity entitySort = response.getEntity();

String html = EntityUtils.toString(entitySort, "utf-8");

请求头参数根据抓包工具拦截的请求时需要的参数变更;

顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
点击我更换图片