สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

fonfonn · 22/08/2022 9:13 am

wkid เขียน: ↑22/08/2022 8:21 am แคปภาพมาดูตรงไฟล์หน่อยครับ

หน้า index.js

: 2022-08-22 (4).png (47.83 KiB) Viewed 1016 times

หน้า page2.js

: 2022-08-22 (5).png (53.29 KiB) Viewed 1016 times

wkid · 22/08/2022 9:18 am

ขอโค้ด ในส่วนของหน้า html และตัว head ด้วยนะครับ เอาโค้ดหน้า html แปะมาเลยก็ได้ครับ

fonfonn · 22/08/2022 9:23 am

fonfonn เขียน: ↑20/08/2022 4:33 pm เลยทดสอบเขียนฟังก์ชันในหน้า html เลย สามารถเปลี่ยนหน้าไปมาได้
โค้ดหน้า index.html
โค้ด: เลือกทั้งหมด
<html>
    <head>
        <script> 
            function sh_index() {
                window.location = 'page2.html';
            }
            setTimeout('sh_index()',10000);
        </script>
        
    </head>
<body>

    <a href="#" onclick="sh_index()">Click me to Page2</a>

</body>
</html> 
โค้ดหน้า page2.html
โค้ด: เลือกทั้งหมด
<html>
    <head>
        <script> 
            function sh_page2() {
                window.location = 'index.html';
            }
            setTimeout('sh_page2()',10000);
        </script>
    </head>
<body>

    <a href="#" onclick="sh_page2()"> Click me to Index </a>

</body>
</html> 
ผลลัพธ์คือ สามารถเชื่อมหน้ากลับไปกลับมาได้ เลยอยากทราบว่าอยากให้เปลี่ยนเป็นการเขียนฟังก์ชันไว้หน้า js และเรียกใช้งานหน้า html ตรงส่วนนี้ทำยังไงหรอคะ

ถ้าโค้ด HTML ใช้แบบนี้อยู่ค่ะ
แต่ถ้า ลบตรงส่วน ฟังก์ชันออกแล้วใช้วิธีการสร้างฟังก์ชั่นไว้หน้า js แล้วเรียกใช้งานไม่ได้ค่ะ ไม่รู้ว่าการทำให้หน้า js รู้จักกับ html ถูกไหม ใช้โค้ดนี้ในส่วน head ของ html แต่ไม่ได้

โค้ด: เลือกทั้งหมด

<script type="text/javascript" src="index.js"></script>

fonfonn · 22/08/2022 9:51 am

จากที่สอบถามเพิ่มเติมไปนะคะ ได้ทำการย้ายไฟล์ js เข้ามาเก็บร่วใกับไฟล์ HTML ใน โฟร์เดอร์เดียวกัน สามารถเรียกใช้งาน ไฟล์ js ได้แล้วค่ะ

ย้ายไฟล์มาอยู่ในโฟร์เดอร์เดียวกัน

ย้ายไฟล์มาอยู่ในโฟร์เดอร์เดียวกัน.png (5.28 KiB) Viewed 1005 times

โค้ด HTML
หน้า index.html

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="index.js"></script> 
    </head>
<body>

    <a href="#" onclick="sh_index()">Click me to Page2</a>

</body>
</html>

โค้ด HTML
หน้า page2.html

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="page2.js"></script> 
    </head>
<body>

    <a href="#" onclick="sh_page2()"> Click me to Index </a>

</body>
</html>

หน้า index.js

โค้ด: เลือกทั้งหมด

function sh_index() {
    setTimeout(() => {
        window.location = 'page2.html';
    }, 1000);

}

หน้า page2.js

โค้ด: เลือกทั้งหมด

function sh_page2() {
    setTimeout(() => {
        window.location = 'index.html';
    }, 1000);

}

สามารถใช้งานสลับหน้าไปมาได้แล้วค่ะ โดยเป็นการเรียกใช้งานฟังชันจากหน้า js ที่เขียนแยกไฟล์ไว้

fonfonn · 24/08/2022 11:57 am

wkid เขียน: ↑17/08/2022 9:27 am สำหรับตรงการกดปุ่มส่งให้เราไปเรียกฟีงก์ชั่นในตัวของ js นะครับ ในหน้าของ html ทำไป เวลาหคลิกให้ไปดึง script ทีเป็นฟังก์ชั่นที่เราสร้างไว้ในหน้า js ครับ
อันนี้ตัวอย่าง
โค้ด: เลือกทั้งหมด
<input type="button" value="คำนวณ" onclick="getInput()" class="btn btn-success"> </input>
จะไปดึงฟังก์ชั่นในตัวของ js ที่มีชื่อว่า getInput นะครับ
โค้ด: เลือกทั้งหมด
function getInput() {


    var name = document.getElementById("text-name").value
    console.log("ชื่อผู้ใช้ ", name);
    var word = document.getElementById("text-word").value
    console.log("คำที่ต้องการส่ง ", word);
    var check = check1
    console.log("คำที่ต้องการส่ง ", check);
    console.log(typeof (check));}

หน้าฟอร์มมีการรับค่า 2 ค่าคือ ชื่อและไฟล์

: หน้าฟอร์ม.jpeg (26.59 KiB) Viewed 1000 times

ส่วนของ ฟังก์ชั่นในตัวของ js จะประมาณนี้ไหมคะ

โค้ด: เลือกทั้งหมด

function getInput() {
    var name = document.getElementById("text-name").value
    console.log("ชื่อผู้ใช้ ", name);
    var file = document.getElementById("text-filepdf").value
    console.log("ไฟล์ที่ต้องการส่ง ", file);
}

โค้ดส่วยของปุ่ม

โค้ด: เลือกทั้งหมด

<input type="button" onclick="getInput()" value="แปลงไฟล์ PDF เป็นภาพ"class="btn btn-primary"></input>

คืออยากทราบว่าเริ่มต้นแบบนี้ถูกแล้วไหมคะ และถามแบบไม่เคยใช้งาน จะต้องทำลักษณะไหนต่อไปคะในการโค้ดให้ตัวฟอร์มเรียกใช้งาน API เพราะเหมือนตอนนี้ที่เข้าใจคือส่วนที่ทำนี้จะเป็การรับค่าที่ Input เข้ามา

wkid · 24/08/2022 1:59 pm

แบบนี้ก็ได้ครับ

wkid · 24/08/2022 2:02 pm

สร้างในส่วนตัวของตัวแปลในการรับค่าของตัว javascript หรือยังครับ ถ้าสมมติว่าทำแล้วจึงจะมีการส่งข้อมูลตรงนั้นไปในส่วนของ ไปยังตัวของ api ต่อครับ

fonfonn · 24/08/2022 2:07 pm

wkid เขียน: ↑24/08/2022 2:02 pm สร้างในส่วนตัวของตัวแปลในการรับค่าของตัว javascript

ยังไม่ได้ทำในส่วนการรับค่าของตัว javascriptค่ะ มีตัวอย่างการทำในส่วนนี้ไหมคะ

fonfonn · 26/08/2022 12:50 pm

wkid เขียน: ↑17/08/2022 9:27 am ส่วนโค้ดที่เป็น API ในการส่งค่า ไปยัง py. อันนี้จะใช้การส่งแบบนี้นะครับ
โค้ด: เลือกทั้งหมด
$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",


            url: `http://${IPjs}:${configjs}/cutword`,
            data: JSON.stringify({ คีย์: ข้อมูล }), //แนะนำให้ใช้ชื่อเดี๋ยวกันไปเลยก็ได้ครับ จะง่ายดี
            success: function (data) {

                console.log(data);
                nubkumeiei(data.prefix, name)
            },
            dataType: "json",
        });

จากการทำงานส่วนนี้ ยังไม่ค่อยเข้าใจ รบกวนอธิบายเพิ่มทีค่ะ
อันนี้เป็นส่วนของการรับค่าจากหน้า Input ผ่าน HTML เข้ามาค่ะ

โค้ด: เลือกทั้งหมด

function getInput() {
    var name = document.getElementById("text-name").value
    console.log("ชื่อผู้ใช้ ", name);
    var file = document.getElementById("text-filepdf").files[0]
    console.log("ไฟล์ ", file);

    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log(reader.result);
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
    };
 }

ซึ่งมีการรับชื่อผู้ใช้งาน กับไฟล์ PDF และมีการแปลง PDF เป็น base64 แล้ว

wkid · 26/08/2022 5:40 pm

สามารถนำเอาไปใส่หลังเรากำหนดตัวแปลและแปลงเป็น base64 ใน js ได้เลยครับ

โค้ด: เลือกทั้งหมด

$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",


            url: `ของฟังก์ชั่นที่ต้องการส่ง`,
            data: JSON.stringify({ data: reader.result }), //แนะนำให้ใช้ชื่อเดี๋ยวกันไปเลยก็ได้ครับ จะง่ายดี
            success: function (data) {

                console.log(data);
                nubkumeiei(data.prefix, name)
            },
            dataType: "json",
        });

ส่วนใน py. ตอนสร้าง ค่ารับตัวแปลก็ตั้งชื่อให้ตรงกับ list ที่เราส่งไปนะครับ

โค้ด: เลือกทั้งหมด

class data(BaseModel):
    data: str

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

Re: สอบถามการโค้ดให้ตัวฟอร์มเรียกใช้งาน API ด้วยภาษา JavaScript

ผู้ใช้งานขณะนี้