同じ処理をスマートに記述することはできないでしょうか？

画面上に２つのボタンがあり、それぞれclick時に以下の処理を行っています。
内部的には同じ処理を行うのですが、もっとスマートに記述する方法はないでしょうか？

なお、ボタンを一つにすることはできないという前提条件があります。

HTML
1<input type="button" id="process1" value="処理A">
2<input type="button" id="process2" value="処理B">
3

js
1    $('#process1').on('click',function(){
2        $.ajax({
3            url:'/process1.php',
4            type:'POST',
5            dataType:'json',
6            data:{
7                'name':$('.name').val(),
8                'email':$('.email').val()
9            }
10        })
11        .done( (data) => {
12            // 受け取った値を処理
13            console.log(data);
14        })
15        .fail( (data) => {
16            console.log(data);
17        })
18        .always( (data) => {
19        });
20    });
21
22    $('#process2').on('click',function(){
23        $.ajax({
24            url:'/process1.php',
25            type:'POST',
26            dataType:'json',
27            data:{
28                'name':$('.name').val(),
29                'email':$('.email').val(),
30            }
31        })
32        .done( (data) => {
33            // 受け取った値を処理
34            console.log(data);
35        })
36        .fail( (data) => {
37            console.log(data);
38        })
39        .always( (data) => {
40        });
41    });

kei344

2019/10/27 09:12

２つのボタンは同じ処理をしているようですが、違う内容なのでしょうか。

m.ts10806

2019/10/27 09:27

要件的には「JavaScript」では？

sakura-shi

2019/10/27 11:51

そうです。同じ処理をしているので、scriptをもっと短くできないかと思い質問をしました。 ajaxの書き方のままがいいかと思っていますが、どう記述したらシンプルに書けるでしょうか？

行動規範の内容に同意します

回答2件

どちらのボタンでも同じ処理をするようなので、こうしてみてください。

js
1    $('#process1, #process2').on('click',function(){
2        $.ajax({
3            url:'/process1.php',
4            type:'POST',
5            dataType:'json',
6            data:{
7                'name':$('.name').val(),
8                'email':$('.email').val()
9            }
10        })
11        .done( (data) => {
12            // 受け取った値を処理
13            console.log(data);
14        })
15        .fail( (data) => {
16            console.log(data);
17        })
18        .always( (data) => {
19        });
20    });

投稿2019/10/27 11:54

kei344

総合スコア69596

sakura-shi

2019/10/27 11:57

ありがとうございます！！

行動規範の内容に同意します

ベストアンサー

おす！

classを使ったら良いと思うぞ。こんな感じでな。

HTML
1<input type="button" id="process1" class="target-process" value="処理A">
2<input type="button" id="process2" class="target-process" value="処理B">

JavaScript
1$('.target-process').on('click',function(){
2
3    var url = ($(this).attr("id") === "process1")
4                     ? '/process1.php'
5                     : '/process2.php'
6                     ;
7
8    $.ajax({
9        url: url,
10        type: 'POST',
11        dataType: 'json',
12        data:{
13            'name':$('.name').val(),
14            'email':$('.email').val()
15        }
16    })
17    .done( (data) => {
18        // 受け取った値を処理
19        console.log(data);
20    })
21    .fail( (data) => {
22        console.log(data);
23    })
24        .always( (data) => {
25    });
26});